展开 Angular Material Tree 的特定节点

Question

我正在使用 Angular Material Tree，我需要根据某些逻辑扩展某些节点。

我从官方 Angular Material 文档中的示例之一开始创建了一个示例。

启动时，页面如下所示

如果我单击“展开水果节点”按钮，我想看到以下渲染

管理按钮点击的代码如下

expandNode() {
    this.nestedNodeMap.forEach((node) => {
      if (node.item === "Fruits") {
        this.treeControl.expand(node);
      }
    });
  }

不幸的是，如果我点击按钮，什么也不会发生。关于如何达到所需行为有什么建议吗？

示例代码可以在这里尝试。

Answer 1

您的问题是您没有扩展父级。

树控件仅展开给定节点或节点的后代（一次展开它们）。

这意味着您必须找到父级，然后展开它，然后展开其子级。

这是工作 stackblitz和相关代码：

  if (node.item === 'Groceries') {
    console.log('parent found');
    this.treeControl.expand(node);
  }
  if (node.item === "Fruits") {
    console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>found', node);
    this.treeControl.expand(node);
  }