Ionic(Angular)崩溃时出现多个http调用问题

Question

我在模板中有项目列表

<ion-list class="ion-text-center">
<div *ngIf="farms$ | async as farmData">
<ion-item (click)="selectFarm(farm)" *ngFor="let farm of farmData" detail="true" button>
<ion-label>
<h2>{{ farm?.name }}</h2>
<p>{{getNumberOfAnimals(farm?.id) | async}}</p>
</ion-label>
</ion-item>
</div>
</ion-list>

在每个项目中，我需要从单独的端点获得动物数量，这是单独的调用

getNumberOfAnimals(id){
const url = (some link) + id;
return this.http.get(url).pipe(take (1))
}

问题是什么？它调用端点的次数(直到页面崩溃才停止(。其中一些甚至显示为已取消。

你知道为什么以及如何解决这个问题吗

Answer 1

以下是我对此回答的假设

• 您没有接受多个id的API
• FormData不是可观察的

在这种情况下，我建议您不要调用此方法，因为从html调用就像从ngViewChecked调用一样，它会多次调用。最好先得到前面的数字，并将其保存到数组中，然后从html中调用它。

这是示例代码。

// declared  variables in component 
farmData: Array<any> = [];
numberOfAnimals: Array<any> =[];
ngOnInit(){
const ids = of(this.farmData.map(elem => elem.id));
// do not forget to unsubscribe
ids.pipe(
concatMap((val)=>{
return this.getNumberOfAnimals(val).pipe(map((elem)=>{
const item = {
id: val,
number: elem,
}
return this.numberOfAnimals.push(item);
}))
})
).subscribe();
}
getNumberOfAnimals(val): Observable<any>{
// your api call
return of({number: 20})
}
callFromYourHTML(id: number){
return this.numberOfAnimals.find(elem => elem.id === id).number;
}

从您的HTML调用此

<ion-list class="ion-text-center">
<div *ngIf="farms$ | async as farmData">
<ion-item (click)="selectFarm(farm)" *ngFor="let farm of farmData" detail="true" button>
<ion-label>
<h2>{{ farm?.name }}</h2>
<p>{{callFromYourHTML(farm?.id) | async}}</p>
</ion-label>
</ion-item>
</div>
</ion-list>