嵌套的 Mat-Tree 子节点不显示在 Angular 9 中

Question

这是我第一次在堆栈溢出中发布问题，我希望我能得到一些帮助来解决我的 Mat-Tree 问题，因为它没有显示孩子，即使当我控制台日志时，数据在那里。

我从服务中获取数据并转换了数据，因此它与 mat-tree 文档示例中显示的模型完全相同。

interface SampleNodeModel {
 id: number;
 name: string;
 type: string;
 children?: SampleNodeModel[];
}

这是我从服务获取数据并将其转换为上面显示的模型并将其分配给数据源的代码：

getData() {
     const dataArray = [];
     const tempModel = {} as SampleNodeModel;
     this.apiService.getSampleData().subscribe(res => {
     tempModel.id = res.id;
     tempModel.name = res.legalName;
     tempModel.type = 'Parent';
    
     const children = [];
    
     res.students.forEach(res2 => {
      const studentList = {} as SampleNodeModel;
      studentList.id = res2.id;
      studentList.name = res2.firstName + res2.lastName;
      studentList.type = 'Student';
      children.push(studentList);
     });
    
     res.teachers.forEach(res3 => {
      const teacherList = {} as SampleNodeModel;
      teacherList .id = res3 .id;
      teacherList .name = res3.firstName + res3.lastName;
      teacherList .type = 'Teacher';
      children.push(teacherList );
     });
    });
    
    tempModel.children = children;
    
    dataArray.push(tempModel);
    
    this.dataSource.data = dataArray;
}

这是 TS 文件的其余部分供您参考：

treeControl = new NestedTreeControl<SampleNodeModel>(node => node.children);
dataSource = new MatTreeNestedDataSource<SampleNodeModel>();

constructor(private apiService: ApiService) {
 this.getData(); // this is the function above for getting the data
}

hasChild = (_: number, node: SampleNodeModel) => node.children !== undefined && node.children.length > 0;

我的 HTML 代码与 Nested Mat-Tree 示例中的代码完全一样。 https://material.angular.io/components/tree/overview

根据上面的代码，我做错了什么吗？ 当我使用 console.log 记录 dataArray 时，我得到的数据格式与模型中的格式一样。我一直试图找出我哪里出错了几个小时，但我似乎无法找到它。

当我 console.log 时，这里是我得到的数据的格式：

dataArray: 0: {children: Array(29), id: 101, name: 'School Name', type: 'Parent'}

显示的只是父母的名字，但是切换和显示孩子的按钮不存在......希望有人可以帮助我！ 谢谢！！！

Answer 1

通过删除 getData() 函数中用于调用 API 的代码块并将其放置在 ngOnInIt 中，我们终于能够让孩子们显示出来，而 getData() 函数仅用于为数据源赋值API 已完成加载。

我对此不确定，但可能的原因是，当 API 加载尚未完成时（如果我解释正确的话），我已经为数据源赋予了价值。 无论如何，这里是我们根据上述问题中的代码对我的代码所做的更改。

treeControl = new NestedTreeControl<SampleNodeModel>(node => node.children);
dataSource = new MatTreeNestedDataSource<SampleNodeModel>();

dataArray = [];
tempModel = {} as SampleNodeModel;

constructor(private apiService: ApiService) {
}

ngOnInIt(): void {
 this.apiService.getSampleData().subscribe(res => {
     this.tempModel.id = res.id;
     this.tempModel.name = res.legalName;
     this.tempModel.type = 'Parent';
    
     const children = [];
    
     res.students.forEach(res2 => {
      const studentList = {} as SampleNodeModel;
      studentList.id = res2.id;
      studentList.name = res2.firstName + res2.lastName;
      studentList.type = 'Student';
      children.push(studentList);
     });
    
     res.teachers.forEach(res3 => {
      const teacherList = {} as SampleNodeModel;
      teacherList .id = res3 .id;
      teacherList .name = res3.firstName + res3.lastName;
      teacherList .type = 'Teacher';
      children.push(teacherList );
     });
     
    this.getData(); // calling the function after getting the data from the API     

    });

}

hasChild = (_: number, node: SampleNodeModel) => node.children !== undefined && node.children.length > 0;

getData() {
    
    this.tempModel.children = children;
    this.dataArray.push(tempModel);
    this.dataSource.data = null;
    this.dataSource = new MatTreeNestedDataSource<SampleNodeModel>();
    this.dataSource.data = dataArray;
}