Question

有Angular Material tree实现的几个示例。我没有找到一个示例，该示例如何自动为每个级别添加一个计数器。例如

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代码中动态完成此操作，那就太好了。有任何想法或提示吗？

Answer 1

解决方案＃1项目计数顺序

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

在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'},
    ]
  }
];

在HTML中：

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

解决方案2的项目计数

此外，对于那些正在寻找父节点代码下的嵌套项目的项目计数的人员，如下所示。例如，Component Page Builder有3个子级：Home Page，Website，Footer，其中“ 5 Website”有5个项目，等等。

要显示计数，只需添加{{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>

角度材质：树节点计数

1 个答案: