Angular 9 material 将垫卡显示为 parent，将 child 显示为图形

Question

我是 angular 9 的新手。我想用图表将 mat-cards 显示为 parent 和 child。下面是数据

 [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]

根据下图，我必须用图形视图显示 mat-card

有可用的 npm 包吗？或者可以这样显示吗？我尝试使用泳道，但我不能。

Answer 1

要将平面数据呈现为层次结构，您可以使用组件递归。每个节点都会渲染它的所有子节点，子节点会渲染下一级子节点，等等

因为有多个根节点，首先让容器组件渲染每个顶级项目：

get rootNodes(): TreeNode[] {
  return this.nodes.filter(node => node.parent === '#');
}

<app-tree *ngFor="let node of rootNodes"
  [nodes]="nodes"
  [nodeId]="node.id">
</app-tree>

然后这些组件中的每一个都将使用相同的组件渲染任何子节点。因为数据是扁平的，我们将所有列表项传递给每个 树组件 并让该组件挑选要呈现的项目。

@Component({
  selector: 'app-tree',
  ...
})
export class TreeComponent  {
  @Input() nodes: TreeNode[];
  @Input() nodeId: string;

  get childNodes(): TreeNode[] {
    return this.nodes.filter(node => node.parent === this.nodeId);
  }
}

<!-- Render the item itself, e.g. using a mat-card -->
<h1>{{nodeId}}</h1>

<!-- Render each child -->
<app-tree *ngFor="let childNode of childNodes" 
  [nodes]="nodes"
  [nodeId]="childNode.id">
</app-tree>

表示层次结构就是样式问题，例如使用填充来缩进每个级别。

此外，如果您的数据在初始渲染后发生变化，您可能希望使用 *ngFor trackBy 来减少所需的 DOM 更改。

Demo StackBlitz

Angular 9 material 将垫卡显示为 parent，将 child 显示为图形

Angular 9 material show the mat card as parent and child as graph

user-interface

angular-material

frontend

angular9

npm-package