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

Question

I am a beginner in Angular and I want to display the value of an array in the child elements of the material tree.

For example, I want to display the name of the fruitList (Apple, Banana...) in the child element.The colors and discounts in the array need to be stored as variables, and they will be used elsewhere and cannot be removed.

I have a working example here: 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 }
]}];

Can you please tell me how i can show the above json in my mat-tree?

Answer 1

I provide for u sample for your specific data. in here

first of all you should write getChildren method then hasNestedChild:

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

then template:

<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>