Question

我正在尝试创建AngularMaterialTree的超级基本POC。似乎识别出有数据，但不会显示它。我正在使用this作为指导，并进行了一个堆栈here.的尝试，我正在竭尽所能，以尽可能多地删除此POC，以便稍后进行扩展，这就是hasNestedChildren只是为什么返回true。

Answer 1

首先，您的根节点具有prop字段，而不是name。因此，您看不到根节点的文本。使您的根节点与服务返回的数据一致：

topLevelData = [
  {
    name: 'people'
  },
  {
    name: 'people again'
  }
]

此后，您将获得根节点内容。但是，如果展开根节点，将看不到任何子节点。

发生这种情况是因为您的数据结构是嵌套的。因此，对于带有孩子的节点，您需要使用mat-nested-tree-node组件而不是mat-tree-node，如上述视频中引用的app.component.html所示。

然后，您需要为节点的子代添加一个占位符。为此，必须使用同一文件的line 20中演示的matTreeNodeOutlet指令。

这两个步骤之后，您的标记将如下所示：

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
  <div class="mat-tree-node">
    <button mat-icon-button matTreeNodeToggle>
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
  </div>
  <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
    <ng-container matTreeNodeOutlet></ng-container>
  </ul>
</mat-nested-tree-node>

别忘了添加example-tree-invisible CSS类来隐藏折叠的节点，如app.component.scss文件中所示：

.example-tree-invisible {
    display: none;
}

但是，TreeList组件将一次获取所有节点。由于您的样本中没有没有子节点的节点，因此将导致StackOverflow异常。您必须限制示例中的节点数量。例如，我添加了一个计数器：

let counter = 0;

hasNestedChild = (node) => {
  if (counter == 20) {
    return false;
  }
  counter++;
  return true;
}

这是更新的sample。

AngularMatTree似乎知道有数据，但不会显示它

1 个答案: