Mat树创建一个具有要显示的值和ID的树

Question

我正在学习如何在文档后使用mat-tree，但是现在我需要使用不仅在其中定义了字符串的数据源树，因为单击节点时我需要知道其id。This is the stackblitz of my project。基本上，我需要将此树与在文档之后建立的复选框一起使用，但是现在我的数据源是：

const TREE_DATA:TodoItemNode = {
  item: "First item",
  children: [{
    item: 'Second item',
    children:[
      {
        item: "Third item",
        id: 3
      }
    ],
      id:2
    }],
  id:1
  }

因此，我想将item的值显示为文本，然后在单击该节点时获取“ id”。目前，我无法使其正常运行，只能看到以下树节点：

是否有一个我想实现的数据作为JSON以及具有属性等的有效示例？

Answer 1

真的，我相信关于树视图的示例更为复杂。想象你有一些像

const TREE_DATA: FoodNode[] = [
  {
    name: "Fruit",
    children: [
      { name: "Apple", id: 1 },
      { name: "Banana", id: 2 },
      { name: "Fruit loops", id: 3 }
    ]
  },
  {
    name: "Vegetables",
    children: [
      {
        name: "Green",
        children: [
          { name: "Broccoli", id: 4 },
          { name: "Brussel sprouts", id: 5 }
        ]
      },
      {
        name: "Orange",
        children: [{ name: "Pumpkins", id: 6 }, { name: "Carrots", id: 7 }]
      }
    ]
  }
];

如果您在FoodNode界面中添加了一些辅助属性：selected，parent和indeterminate

interface FoodNode {
  name: string;
  id?: number;
  selected?: boolean;
  indeterminate?:boolean;
  parent?:FoodNode
  children?: FoodNode[];
}

这里的关键是知道“父母”，所以，当我们张开一张支票时，询问他的父母

  setParent(data, parent) {
    data.parent = parent;
    if (data.children) {
      data.children.forEach(x => {
        this.setParent(x, data);
      });
    }
  }

您可以编写类似.html的代码

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li class="mat-tree-node">
      <!-- use a disabled button to provide padding for tree leaf -->
      <button mat-icon-button disabled></button>
          <mat-checkbox class="checklist-leaf-node" 
            (change)="todoItemSelectionToggle($event.checked,node)" 
            [checked]="node.selected"
>{{node.name}}</mat-checkbox>
    </li>
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
    <li>
      <div class="mat-tree-node">
        <button mat-icon-button matTreeNodeToggle
                [attr.aria-label]="'toggle ' + node.name">
          <mat-icon class="mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
            <mat-checkbox [checked]="node.selected"
                  [indeterminate]="node.indeterminate && !node.selected"
                  (change)="todoItemSelectionToggle($event.checked,node)">
            {{node.name}}</mat-checkbox>
      </div>
      <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

其他功能是

  treeControl = new NestedTreeControl<FoodNode>(node => node.children);
  dataSource = new MatTreeNestedDataSource<FoodNode>();

  constructor() {
    this.dataSource.data = TREE_DATA;
    Object.keys(this.dataSource.data).forEach(x => {
      this.setParent(this.dataSource.data[x], null);
    });
  }

  hasChild = (_: number, node: FoodNode) =>
    !!node.children && node.children.length > 0;

  checkAllParents(node) {
    if (node.parent) {
      const descendants = this.treeControl.getDescendants(node.parent);
      node.parent.selected=descendants.every(child => child.selected);
      node.parent.indeterminate=descendants.some(child => child.selected);
      this.checkAllParents(node.parent);
    }
  }

  todoItemSelectionToggle(checked, node) {
    node.selected = checked;
    if (node.children) {
      node.children.forEach(x => {
        this.todoItemSelectionToggle(checked, x);
      });
    }
    this.checkAllParents(node);
  }
}
  submit() {
    let result = [];
    this.dataSource.data.forEach(node => {
      result = result.concat(
        this.treeControl
          .getDescendants(node)
          .filter(x => x.selected && x.id)
          .map(x => x.id)
      );
    });
    console.log(result);
  }

[The stackblitz，here