Question

有人可以帮我用最简单的方法向角度材质嵌套树添加新节点吗？我到处搜索，没有找到适合嵌套树的方法。到目前为止，这是我的鳕鱼：

TS:
export class FileNode {
  children!: FileNode[];
  fileName!: string;
  type: any;
}

    export class AppComponent {
      nestedDataSource= new MatTreeNestedDataSource<FileNode>();
      nestedTreeControl = new NestedTreeControl<FileNode>(node => node.children);
    
      constructor() {
        this.nestedDataSource.data=TREE_DATA;
       }
    
       hasChild = (nr: number, nodeData: FileNode) => { return !(nodeData.type); };
          } 
HTML :
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">

<!--The node who does not need expansion because is a file of a folder-->
  <mat-tree-node *matTreeNodeDef="let node">
      <li class="mat-tree-node">
          <button mat-icon-button disabled></button>
          {{node.fileName}}: {{node.type}}
          <button mat-icon-button><mat-icon>add</mat-icon></button>
      </li>
  </mat-tree-node>

<!--The node who does need expansion because is a folder-->
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
      <li>
          <div class="mat-tree-node">
              <button mat-icon-button matTreeNodeToggle>
                  <mat-icon class="mat-icon-rtl-mirror">
                      {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                  </mat-icon>
              </button>
              {{node.fileName}}
              <button mat-icon-button><mat-icon>add</mat-icon></button>
          </div>
          <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
              <ng-container matTreeNodeOutlet></ng-container>
          </ul>
      </li>
  </mat-nested-tree-node>
</mat-tree>

<!--The compiler chooses the node depending on the method: hasNestedChild-->

Answer 1

您正在寻找的解决方案已在他们的官方文档中提供。请检查 https://material.angular.io/components/tree/examples#tree-checklist 链接，如果它不能解决您的用例，请告诉我。

角材质嵌套树

1 个答案: