angular - 如何使用 SelectionModel 以编程方式选择 Material 树节点？

Question

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

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

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

Answer 1

要预选水果节点，请在附加的 stackblitz 示例中的 TreeChecklistExample 类的 ngAfterViewInit 中实现以下代码。

• 这将遍历 treeControl 中的 dataNodes
• 如果 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])
        }
      }
    }
  

堆栈 Blitz

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

---