javascript - 在 Angular 中将 *ngFor 与异步管道一起使用时出现无限循环

Question

我的问题与 this one 非常相似.

在foo.component.html中:

<ng-container *ngFor="let item of items">
    <ng-container *ngIf="(fooFunc(item.property) | async) as element">
        {{ element | json }}
    </ng-container>
</ng-container>

在foo.component.ts中:

fooFunc(foo: any) {
  return this.fooService.fooServiceFunc(foo).pipe(
    take(1),
    shareReplay(1)
  );
}

fooService 中的 fooServiceFunc 一次只会返回一个 Observable。

我的问题是，现在我的应用程序会触发无限请求(在迭代整个 items 数组之后，它将从头开始再次触发请求)，这似乎是一个侧面-async 管道的效果在 this answer 中宣布。但我仍然不知道如何解决这个问题？

Answer 1

将共享流保存到变量并在模板中使用该变量

data$ = forkJoin(
  this.items.map(item => this.fooService.fooServiceFunc(item.property).pipe(
    map(fetchResult => ({ fetchResult, item })
  ))
)

<ng-container *ngFor="let item of data$ | async">
    <ng-container *ngIf="item.fetchResults">
        {{ item.fetchResults | json }}
    </ng-container>
</ng-container>

现在，您为每个项目创建新流，每个查询都会运行更改检测，然后再次运行查询。

我的建议:尽量避免模板中的函数调用，模板中的函数在当前组件的changeDetection运行时执行(AsyncPipe通过输入流中的每个值运行更改检测)。