如何使用 SelectionModel 以编程方式选择材质树节点？答案

【问题标题】：How do I programmatically select Material Tree nodes with SelectionModel?如何使用 SelectionModel 以编程方式选择材质树节点？
【发布时间】：2018-11-29 18:06:22
【问题描述】：

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

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

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

【问题讨论】：

标签： angular typescript angular-material

【解决方案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])
      }
    }
  }

堆栈闪电战

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

【讨论】：

NestedTreeControls 有一个未定义的dataNodes，这使得答案不可能。 This github comment 在相关问题上建议您手动设置它，直到它解决为止。
非常感谢！我试图使用this.dataSource.data 而不是dataNodes，但它不起作用。
@Ashley 使用 dataSource 可以工作，但你必须递归地遍历树，并让函数返回整个树以展开。

【解决方案2】：

对于NestedTreeControl，其中dataNodes 未定义，您可以直接浏览数据源。这可以使用递归函数来完成，这里通过用于填充树的TreeItem 类上的id 属性来演示它。当然，您的查找方法可能会有所不同，具体取决于您所拥有的类。

在DataSource 数据中找到正确的节点后，您可以创建一个包含找到的对象的数组并将其返回。递归的前几级然后可以将自己的一级找到的项目添加到末尾，因此最终结果是一个包含整个序列的数组，以相反的顺序展开，索引0为最深节点。

expandTreeToNode(nodeId: number) {
    let selectNode: TreeItem[] | null = this.findTreeNode(this.nestedDataSource.data, nodeId);
    if (selectNode != null && selectNode.length > 0) {
        // expand the returned tree, from shallowest to deepest level
        for (let i : number = selectNode.length - 1; i >= 0; --i)
            this.nestedTreeControl.expand(selectNode[i]);
        // function to make stuff happen when you click on a node.
        this.setSelectedNode(selectNode[0]);
    }
}

findTreeNode(collection: TreeItem[], nodeId: number) : TreeItem[] | null
{
    for (let i = 0; i < collection.length; ++i)
    {
        let item : TreeItem = collection[i];
        if (item.id == nodeId)
            return new Array(item);
        let chItem : TreeItem[] | null = this.findTreeNode(item.children, nodeId);
        if (chItem != null) {
            chItem[chItem.length] = item;
            return chItem;
        }
    }
    return null;
}

【讨论】：