如何通过对 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) 是 component.ts 文件中的一个函数，我在其中填充了 AnotherObjArray。

现在我只接到第二个 API 的没完没了的电话。

我尝试使用 Directive 和 EventEmitter，但我没有得到任何东西。

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

更新：

假设第一次调用 API 我进入 ObjectArray：

[obj1From1stArray, obj2From1stArray]

现在我再次调用 API this.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>

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

How to have nested ngfor with dynamic calls to api

angular

typescript

ngfor