Блог

Может ли кто-нибудь, пожалуйста, помочь мне с самым простым методом добавления нового узла во вложенное дерево углового материала? Я искал везде и не нашел подходящего метода для вложенного дерева. Это моя треска до сих пор :

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

Решение, которое вы ищете, уже доступно в их официальной документации. Пожалуйста, проверьте https://material.angular.io/components/tree/examples#tree-checklist свяжись и дай мне знать, если это не решит твой вариант использования.