ngFor 块内模板中的异步管道触发 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}`);
}

我的目标是调用该方法并使用模板中的异步管道订阅 observable。但是，当我运行应用程序时，会生成无休止的 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