如何通过对 API 的动态调用来嵌套 ngfor

Question

我有一个对象数组，我立即从我的API中返回，并以这样的.component.html显示它们：

<div *ngFor="let obj of ObjectArray">
<div>{{obj.name}}</div>
</div>

我需要对我将填充第二个对象数组的每个对象进行第二次调用 API，并且需要在obj.name下方显示它，我尝试这样做：

<div *ngFor="let obj of ObjectArray">
<div data-dummy="{{populateAnotherObjectArray(obj.id)}}"></div>
<div>{{obj.name}}</div>
<div *ngFor="let anotherObj of AnotherObjArray">
{{anotherObj.name}}
</div>
</div>

populateAnotherObjectArray(obj.id)是我填充 OtherObjArraycomponent.ts文件中的一个函数。

现在我只能无休止地调用第二个 API。

我尝试使用指令和事件发射器，但我在那里没有得到任何东西。

有没有简单的方法可以做到这一点？

更新：

假设我第一次调用 APIObjectArray：

[obj1From1stArray, obj2From1stArray]

现在我再次调用 APIthis.api.populate2ndArray(obj1From1stArray.id)并进入AnotherObjecArray：

[obj1From2ndArray]

之后this.api.populate2ndArray(obj2From1stArray.id)并进入AnotherObjecArray：

[obj2From2ndArray]

我在.html页面上得到的当前答案：

obj1From1stArray name
obj1From2ndArray
obj2From2ndArray
obj2From1stArray name
obj1From2ndArray
obj2From2ndArray

我想要什么：

obj1From1stArray name 
obj1From2ndArray
obj2From1stArray name
obj2From2ndArray

Answer 1

尽量避免在指令和插值中调用函数。如果不控制更改检测策略，则调用它们的次数将过多。您可以在显示数据之前在控制器中触发调用。尝试以下操作

控制器

import { forkJoin, of } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';
ngOnInit() {
this.apiService.getObjectArray().pipe(
switchMap(arr1 => {
this.ObjectArray = arr1;
return forkJoin(arr1.map(item => this.apiService.getAnotherObjArray(item['id'])));
}),
catchError(err1 => {
// handle error
return of(err1);
})
).subscribe(
arr2 => {
this.ObjectArray.forEach(obj, index => this.ObjectArray['AnotherObjArray'] = arr2[index]);
},
err2 => {
// handle error
}
);
}

模板

<div *ngFor="let obj of ObjectArray">
<div>{{obj.name}}</div>
<div *ngFor="let anotherObj of obj.AnotherObjArray">
{{anotherObj.name}}
</div>
</div>