如何使用SelectionModel以编程方式选择“材料树”节点?

时间:2018-11-29 18:06:23

标签: angular angular-material

我有一棵带有复选框(let's use Material's example here)的树。我希望开始检查水果节点。如何检查这些节点?

我看到SelectionModel有一个select()方法,该示例传递了一个节点。但是在示例中,构成树的数据是TodoItemNode的数组,但是SelectionModel包含TodoItemFlatNode。示例中的transformer方法可以“拉平”我的节点(即,将TodoItemNode转换为TodoItemFlatNode),但这将返回一个新实例。

如何以编程方式选择mat-tree复选框以匹配我的数据?

1 个答案:

答案 0 :(得分:5)

要预先选择水果节点,请在随附的stackblitz示例中的ngAfterViewInit类的TreeChecklistExample中实现以下内容。

  • 这将循环遍历dataNodes中的treeControl
  • 如果item == 'Fruits'选择节点并展开
  • 如果item == 'Groceries'扩展节点,因为它是Fruits的父节点。

    ngAfterViewInit() {
        for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
          if (this.treeControl.dataNodes[i].item == 'Fruits') {
            this.todoItemSelectionToggle(this.treeControl.dataNodes[i]);
            this.treeControl.expand(this.treeControl.dataNodes[i])
          }
          if (this.treeControl.dataNodes[i].item == 'Groceries') {
            this.treeControl.expand(this.treeControl.dataNodes[i])
          }
        }
      }
    

Stackblitz

https://stackblitz.com/edit/angular-j2nf2r?embed=1&file=app/tree-checklist-example.html