如何在Angular mat-tree的子元素中显示数组答案

【问题标题】：How to display array in sub-elements of Angular mat-tree如何在Angular mat-tree的子元素中显示数组
【发布时间】：2021-01-03 08:01:56
【问题描述】：

我是 Angular 的初学者，我想在材质树的子元素中显示数组的值。

比如我想在子元素中显示fruitList的名称(Apple, Banana...)。数组中的颜色和折扣需要存储为变量，在别处会用到，不能被删除。

我在这里有一个工作示例：stackblitz example

const TREE_DATA: FoodNode[] = [{
fruit: "fruit_1",
fruitList: [
  { name: "Apple", color: "red", discount: false },
  { name: "Banana", color: "yellow", discount: true },
  { name: "Grape", color: "purple", discount: true }
]},{
fruit: "fruit_2",
fruitList: [
  { name: "Lemon", color: "pale yellow", discount: false },
  { name: "Kiwi", color: "green", discount: false },
  { name: "Strawberry", color: "red", discount: true }
]}];

你能告诉我如何在我的 mat-tree 中显示上面的 json 吗？

【问题讨论】：

标签： javascript json angular angular-material

【解决方案1】：

我为您提供特定数据的样本。在here

首先你应该写 getChildren 方法然后 hasNestedChild ：

private _getChildren = (node: FoodNode): any => observableOf(node.fruitList);
  hasNestedChild = (_: number, nodeData: FoodNode) => {
    if (nodeData.hasOwnProperty("fruitList")) {
      return nodeData.fruitList.length > 0;
    }
    return false;
  };

然后是模板：

<mat-tree
  [dataSource]="nestedDataSource"
  [treeControl]="nestedTreeControl"
  class="example-tree mat-tree-position"
>
  <!-- Without Children -->
  <mat-tree-node *matTreeNodeDef="let node">
    <li class="mat-tree-node">
      <button mat-icon-button disabled></button>
      {{node.name}}
    </li>
  </mat-tree-node>

  <!-- With Children -->
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <li>
      <div class="mat-tree-node">
        <button
          mat-icon-button
          matTreeNodeToggle
          [attr.aria-label]="'toggle ' + node.fruit"
        >
          <mat-icon class="mat-icon-rtl-mirror">
            {{nestedTreeControl.isExpanded(node) ? 'expand_more' :
            'chevron_right'}}
          </mat-icon>
        </button>
        <ng-container *ngIf="node.name"> {{node.name}} </ng-container>
        <ng-container *ngIf="node.fruit"> {{node.fruit}} </ng-container>
      </div>
      <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

【讨论】：