Question

Angular Material在其组件（API）中具有大量属性。

例如：https://material.angular.io/components/tree/api#MatNestedTreeNode

如何从HTML（语法是什么）中访问level属性？

<mat-tree [dataSource]="dataSource"
          [treeControl]="treeControl">
    <mat-nested-tree-node *matTreeNodeDef="let data; when: hasChild">
        <div>

                    How to access this node's properties?

        </div>
        <ul [class.example-tree-invisible]="!treeControl.isExpanded(data)">
            <ng-container matTreeNodeOutlet></ng-container>
        </ul>
    </mat-nested-tree-node>
    <mat-tree-node *matTreeNodeDef="let data">
        <div>

                    How to access this node's properties?

        </div>
    </mat-tree-node>
</mat-tree>

TS：

@Component({
    selector: 'app-tree',
    templateUrl: './tree.component.html',
    styleUrls: ['./tree.component.scss']
})
export class MyTreeComponent {

    treeControl = new NestedTreeControl<Data>(d => d.children);
    dataSource = new MatTreeNestedDataSource<Data>();

    constructor() { }

    hasChild = (_: number, d: Data) => !!d.children && d.children.length > 0;
}

我知道如何以编程方式（使用@ViewChild来做到这一点，但这不会这样做，因为组件有很多节点，而不是一个。

编辑：扩展的源代码。

编辑2：为了更好地与Z.Bolbol答案保持一致-修改标题并添加注释-之所以创建此问题，是因为我不知道如何在mat-tree中检索节点的级别属性。看来您必须自己计算，并且所提供的答案实际上可以解决原始问题-已被接受。就是说-关于@ViewChildren和QueryList的评论是100％正确，我确实按照提供的链接使它们起作用-只是它们没有用，因为level属性从未在嵌套树中使用（level总是等于0）。

Answer 1

级别标志仅适用于Flat树，我认为它是在父级展开时计算的，根节点的级别为0，然后对于每个扩展节点：

node.level = parentNode.level + 1 ;

因此，如果您想使事情简单，只需使用Falt树而不是Nested树即可。如果出于任何原因想要继续使用嵌套树，则需要使用自定义方法来计算级别。

ts

@Component({
    selector: 'app-tree',
    templateUrl: './tree.component.html',
    styleUrls: ['./tree.component.scss']
})
export class MyTreeComponent {

    treeControl = new NestedTreeControl<Data>(d => d.children);
    dataSource = new MatTreeNestedDataSource<Data>();

    constructor() { }

    hasChild = (_: number, d: Data) => !!d.children && d.children.length > 0;

  getLevel(data, node: Data) {
    let path = data.find(branch => {
      return this.treeControl
        .getDescendants(branch)
        .some(n => n.name === node.name);
    });

    return path ? this.getLevel(path.children, node) + 1 : 0 ; 
  }
}

html

<mat-tree [dataSource]="dataSource"
          [treeControl]="treeControl">
    <mat-nested-tree-node *matTreeNodeDef="let data; when: hasChild">
        <div>

                    {{ getLevel(this.dataSource.data, node)}}
        </div>
        <ul [class.example-tree-invisible]="!treeControl.isExpanded(data)">
            <ng-container matTreeNodeOutlet></ng-container>
        </ul>
    </mat-nested-tree-node>
    <mat-tree-node *matTreeNodeDef="let data">
        <div>

                    {{ getLevel(this.dataSource.data, node)}}

        </div>
    </mat-tree-node>
</mat-tree>

如何在DOM内部的mat-tree中访问嵌套节点的level属性？

1 个答案: