小编Lar*_*dal的帖子

我正在尝试在我的应用中设置“材质树”。与mat-table f.ex.相比，这相当复杂，但是我设法获取数据并显示了这一点。但是，我只能显示所有名称，而不是扩展/折叠它们的子代。我得到错误

cannot read property treeControl of undefined

单击项目时。我尝试了另一则SO-post的建议，但又收到了另一个错误

cannot read property length of undefined

我该如何解决？这是我现在拥有的代码：

overview.component.html

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
  <mat-tree-node *matTreeNodeDef="let node">
    <li class="mat-tree-node">
      <button mat-icon-button disabled></button>
      {{ node.name }}
    </li>
  </mat-tree-node>

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

overview.component.scss

example-tree-invisible {display: none;}

.example-tree ul,
.example-tree li {
    margin-top: 0;
    margin-bottom: …

我正在尝试从数据源获取使用布尔值的材质树。我正在对输入进行过滤 datasource.data ，这会导致每次用户输入内容时树都会折叠。为了避免这种情况，我想在特定行中使用布尔值来展开/折叠材质树。我已经使用材质表成功完成了此操作，但无法使其与树一起使用。这是我到目前为止所拥有的：

HTML 文件：

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
  <mat-tree-node *matTreeNodeDef="let node">
    <li class="mat-tree-node">
      <button mat-icon-button disabled></button>
      {{node.name}}
    </li>
  </mat-tree-node>

  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <li>
      <div class="mat-tree-node">
        <button mat-icon-button
                [attr.aria-label]="'toggle ' + node.name"
                click="changeState(node)">
          <mat-icon class="mat-icon-rtl-mirror">
            {{node.expanded ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.name}} ({{node.expanded}})
      </div>
      <ul [class.example-tree-invisible]="node.expanded">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

TS 文件：

import {NestedTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';
import {BehaviorSubject} from 'rxjs';

/**
 * Json node data with …