Angular Material Tree View报错排查：页面空白无列表显示

根据你提供的HTML代码和报错情况，大概率是遗漏了以下关键配置步骤：

1. 未导入必要的Angular Material/Cdk模块 #

在app.module.ts中必须导入以下模块，否则组件指令无法被识别：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Material依赖动画，必须导入
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CdkTreeModule,
    MatIconModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 组件类未正确初始化TreeControl和DataSource #

HTML中用到的nestedTreeControl和nestedDataSource必须在组件类中完成初始化并绑定数据：

import { Component } from '@angular/core';
import { NestedTreeControl } from '@angular/cdk/tree';
import { NestedDataSource } from '@angular/cdk/tree';

// 定义树形节点结构接口
interface FileNode {
  filename: string;
  type: string;
  children?: FileNode[];
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nestedTreeControl: NestedTreeControl<FileNode>;
  nestedDataSource: NestedDataSource<FileNode>;

  // 模拟树形测试数据
  TREE_DATA: FileNode[] = [
    {
      filename: 'src',
      type: 'folder',
      children: [
        { filename: 'app', type: 'folder', children: [{ filename: 'app.component.ts', type: 'file' }] },
        { filename: 'assets', type: 'folder' }
      ]
    },
    { filename: 'package.json', type: 'file' }
  ];

  constructor() {
    // 初始化TreeControl，传入获取子节点的方法
    this.nestedTreeControl = new NestedTreeControl<FileNode>(this.getChildren);
    // 初始化数据源并绑定数据
    this.nestedDataSource = new NestedDataSource();
    this.nestedDataSource.data = this.TREE_DATA;
  }

  // 实现模板中用到的hasNestedChild方法
  hasNestedChild = (_: number, node: FileNode) => node.children?.length > 0;

  // 供TreeControl使用的子节点获取方法
  private getChildren = (node: FileNode) => node.children ?? [];
}

3. 缺失基础样式导致显示异常 #

在app.component.css中添加必要样式，确保节点折叠/展开功能正常：

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

.example-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
}

4. 根据控制台报错针对性排查 #

如果以上配置完成后仍报错，结合报错信息定位问题：

• 若提示Can't bind to 'dataSource' since it isn't a known property of 'cdk-tree'：确认CdkTreeModule已正确导入
• 若提示'mat-icon' is not a known element：确认MatIconModule已正确导入
• 若提示Cannot read properties of undefined (reading 'isExpanded')：确认nestedTreeControl已初始化，且数据源中无undefined节点

内容的提问来源于stack exchange，提问作者NgatungaEmily