特定于 ngFor 的每个项目的角度获取数据答案

【问题标题】：Angular fetch data specific to every item of ngFor特定于 ngFor 的每个项目的角度获取数据
【发布时间】：2019-12-06 16:50:41
【问题描述】：

我有一组项目，它们自己有一个“外键”，可以唯一标识基于服务器的其他项目。

<div *ngFor="let parentItem of parentItems">
  {{(getChild(parentItem.childId) | async)?.someData}}
</div>

getChild(id):Observable<IChild>{
  return this.childService.getChild(id);
}

我想嵌套这些项目并显示它们。遗憾的是，子括号中没有任何显示，即使在登录到控制台时，这些值也能在常规订阅者中正确显示。此外，似乎还有另一个问题。该程序一直尝试重新获取它。我认为这与更改检测有关，但我不知道如何解决这个问题。

【问题讨论】：

标签： angular typescript asynchronous observable ngfor

【解决方案1】：

你为什么不做这样的事情：

// component
public children$: Observable<Child>[]
constructor(childService: ChildService) {
  children$ = parentItems.map((parentItem) => this.childService.getChild(parentItem.childId).pipe(
     (data) => data.someData
  ));
}

和

// template
<div *ngFor="let child$ of children$">
   {{ child$ | async }}
</div>

【讨论】：

这可能是更好的方法，而不是在循环中获取记录。通过这种方式，您在循环开始执行之前将所有记录都保存在内存中。