angular - ngFor block 内模板中的异步管道触发 http GET 调用循环

Question

我有以下组件模板:

<div *ngFor="let ctrl of data; trackBy:ctrl?.Id">
   <div *ngIf="getNext(ctrl.nextDate) | async as next">
        <span>{{next | date: 'dd.MM.yyyy'}}</span>
   </div>
</div>

getNext() 是一个返回 Observable<Date> 的简单方法:

public getNext(deadline: string): Observable<Date> {
   return this.http.get<Date>(`${this.config.apiEndpoint}/api/meeting?deadline=${deadline}`);
}

我的目标是调用该方法并使用模板中的异步管道订阅可观察对象。但是，当我运行应用程序时，会生成无休止的 GET 和 OPTIONS 请求。

另外，如果我将方法调用放在 ngFor 之外，也会发生同样的情况。该调用需要在 ngFor 内部执行，因为每个集合项的参数都不同。

为什么订阅后只调用一次，不再调用？

Answer 1

在模板中调用函数通常不是一个好主意，因为它会导致不可预知的结果。这是重构代码以避免这种情况的方法:

data: any = [....] // some data
data$: Observable[];

ngOnInit() {
    this.data$ = this.data.map(elem => this.getNext(elem));
} 

public getNext(deadline: string): Observable<Date> {
   return this.http.get<Date>(`${this.config.apiEndpoint}/api/meeting?deadline=${deadline}`);
}

在你的模板中:

<div *ngFor="let ctrl of data$">
   <div *ngIf="ctrl | async as next">
        <span>{{next | date: 'dd.MM.yyyy'}}</span>
   </div>
</div>

这是我创建的一个 stackblitz，您可以在其中看到类似机制的工作原理:https://stackblitz.com/edit/angular-nyn4qz