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

问题描述

这是我第一次在堆栈溢出中在此处发布问题，我希望我对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代码与嵌套Mat-Tree示例中的代码完全相同。 https://material.angular.io/components/tree/overview

基于上面的代码，我做错了什么吗？当我console.log the dataArray时，我正以模型中的格式获取数据。.我一直在试图找出错误的时间，但是似乎找不到。>

当我console.log时，这是我获取的数据格式：

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

显示的只是父母的名字，但是没有用于切换和显示孩子的按钮……希望有人可以帮助我！谢谢！！！

解决方法

我们最终能够通过删除在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;
}