MatTreeView未显示儿童-Angular 14

Question

我试图显示gitlab的私有组数据(使用公共组进行测试(，我使用Angular NestedTreeView显示每个组及其子组，父节点显示正常，但我找不到显示其子节点的方法，我已经将数据映射到TreeView想要的方式，带有我从gitlab的api中获取的数据的数组对父母和他们的孩子来说都很好。这是代码：

数据.ts

export interface Data {
name: string;
id?: string;
children?: Data[]
}

data.service.ts

@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(public http: HttpClient) { }
getEndpoint(id: string): string
{
return `https://gitlab.com/api/v4/groups/${id}/subgroups`
}
getRoot(): Observable<Data[]>{

return this.http.get<Data[]>(this.getEndpoint("9970")).pipe(
map((res: any) =>
res.map((data: Data) =>
{
return {
name: data.name,
id: data.id,

}
})
)
)
}
getNodes(subid: string): Observable<Data[]>
{
return this.http.get<Data[]>(this.getEndpoint(subid)).pipe(
map((res: any) =>
res.map((data: Data) =>
{
return {
name: data.name,
id: data.id,
}
})
)
)
} 


}

边栏组件.ts

@Injectable({
providedIn: 'root' })
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss']
})
export class AppSidebarComponent implements OnDestroy,OnInit {
mobileQuery: MediaQueryList;
private _mobileQueryListener: () => void;

result: Data[] = [];
treeControl = new NestedTreeControl<Data>(node => node.children);
dataSource = new MatTreeNestedDataSource<Data>();
constructor(
changeDetectorRef: ChangeDetectorRef,
media: MediaMatcher,
public menuItems: MenuItems,
public http: HttpClient,
public dataService: DataService
) {
this.mobileQuery = media.matchMedia('(min-width: 768px)');
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
this.mobileQuery.addListener(this._mobileQueryListener);

this.getRoots();
}

ngOnInit(): void {
}
getRoots()
{
this.dataService.getRoot().subscribe(response => {
this.result =  response
this.result.forEach(directory => {
let nodeList: Data[]= []
this.dataService.getNodes(directory.id!).subscribe(response => {
nodeList = <Data[]> response
if(nodeList.length>0)
directory.children = nodeList;
nodeList = [];
})    
});
console.log(this.result);
this.dataSource.data = this.result;
})
}
ngOnDestroy(): void {
this.mobileQuery.removeListener(this._mobileQueryListener);
}
hasChild = (_: number, node: Data) => !!node.children && node.children.length>0;
}

边栏.组件.html

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

控制台中的数据

它如何在模板中显示

Answer 1

它们没有显示的主要原因是调用getNodes(..).subscribe不同步，因此您需要一种方法来等待它们。forkJoin是的可能解决方案

getRoots() {
this.dataService.getRoot().subscribe((response) => {
const result$ = forkJoin(
response.map((directory) => {
return this.dataService.getNodes(directory.id!).pipe(
map((children) => {
return {
...directory,
children,
};
})
);
})
);
result$.subscribe({
next: (result) => {
this.result = result as Data[];
this.dataSource.data = this.result;
},
});
})
}