Angular 角度材质：树节点计数

这里有几个实现的例子。我没有找到的是一个如何为每个级别自动添加计数器的示例。e、 g

1 Groceries
  1 Almond Meal flour
  2 Organic eggs
  3 Protein Powder
  4 Fruits
    1 Apple
    2 Berries
    3 Orange
2 Reminders

几乎崩溃了

1 Groceries
   1 Almond Meal flour
   2 Organic eggs
   3 Protein Powder
 v 4 Fruits
2 Reminders

我知道我可以在节点设置期间添加计数器。但是，由于我想用DnD对结构进行重新排序，如果能在html代码中动态完成这一点，那就太好了。有什么想法或提示吗？

解决方案#1项盘点顺序

您需要通过向节点添加属性来构造数据以显示索引。因此，在.ts文件更新界面中添加所需的属性，如下所示（请注意，代码不完整，我假设您至少已经有：

在TS中：

interface FoodNode {
  id: number; //THIS IS YOUR ORDER NUMBER
  name: string;
  url: string;
  children?: MenuNode[];
}
const TREE_DATA:2 FoodNode[] = [
  {
    id:"1"  //THIS IS YOUR ORDER NUMBER YOU WILL REFER IN HTML AS {{node.id}} 
    name: 'Fruit',
    url:'/fruitCategrory'
    children: [
      {id:"1",name: 'Apple' , url:'/fruit'},
      {id:"2",name: 'Banana', url:'/fruit'},
      {id:"3",name: 'Fruit loops', url:'/fruit'},
    ]
  }
];

 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    {{node.id}}.{{node.name}} <!-- THIS IS YOUR ID -->
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <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>
    {{node.id}}.{{node.name}} <!-- THIS IS YOUR ID -->
  </mat-tree-node>
</mat-tree>

在HTML中：

interface FoodNode {
  id: number; //THIS IS YOUR ORDER NUMBER
  name: string;
  url: string;
  children?: MenuNode[];
}
const TREE_DATA:2 FoodNode[] = [
  {
    id:"1"  //THIS IS YOUR ORDER NUMBER YOU WILL REFER IN HTML AS {{node.id}} 
    name: 'Fruit',
    url:'/fruitCategrory'
    children: [
      {id:"1",name: 'Apple' , url:'/fruit'},
      {id:"2",name: 'Banana', url:'/fruit'},
      {id:"3",name: 'Fruit loops', url:'/fruit'},
    ]
  }
];

 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    {{node.id}}.{{node.name}} <!-- THIS IS YOUR ID -->
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <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>
    {{node.id}}.{{node.name}} <!-- THIS IS YOUR ID -->
  </mat-tree-node>
</mat-tree>

{{node.id}.{{node.name}
{{treeControl.isExpanded（节点）？'expand_more'：'chevron_right'}
{{node.id}.{{node.name}

解决方案#2项计数

此外，对于那些正在查找父节点代码下嵌套项的项计数的人，下面是。例如，组件页面生成器有3个子项：主页、网站、页脚，其中“5个网站”有5个项，等等

要显示count simple add{{node.children.length}，请按以下代码进行添加：

    <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
      <!-- This is the tree node template for leaf nodes -->
      <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="tree-node">
        <!-- use a disabled button to provide padding for tree leaf -->
        <button mat-icon-button disabled></button>
    <a
      routerLinkActive="active"
      *ngIf="node.url; else noLink"
      [routerLink]="[node.url]"
      >{{ node.name }}
    </a>
    <ng-template #noLink> {{ node.name }} </ng-template>
  </cdk-nested-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <cdk-nested-tree-node
    *cdkTreeNodeDef="let node; when: hasChild"
    class="tree-node"
  >
    <button
      mat-icon-button
      [attr.aria-label]="'toggle ' + node.name"
      cdkTreeNodeToggle
    >
      <mat-icon class="mat-icon-rtl-mirror">
        {{ treeControl.isExpanded(node) ? "folder" : "folder_open" }}
      </mat-icon>
    </button>
    {{ node.children.length }} <!-- HERE IS YOUR COUNT -->
    {{ node.name }}
    <div [class.tree-invisible]="!treeControl.isExpanded(node)">
      <ng-container cdkTreeNodeOutlet></ng-container>
    </div>
  </cdk-nested-tree-node>
</cdk-tree>

{{node.name}
{{node.name}
{{treeControl.isExpanded（node）-“folder”：“folder_open”}
{{node.children.length}
{{node.name}

如何显示延迟加载树的计数器？如果子节点未展开（通过api调用获取），是否会显示不同的内容？请参阅我的更新。希望如此helps@Leo，如果使用具有平面节点的树，则可以将所有需要的属性添加到“项”是的，但这些都添加了一次。除非我更改它，否则在生命周期中不会更改。但是对于DnD，计数器将根据我将删除节点的位置而更改。因此，按照您的建议听起来像是一些计算，尽管节点尚未删除。也许我错过了一些。。。。