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>

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

multiple http calls issue on Ionic (Angular) crashing

javascript

httpclient

ionic-framework

angular

ionic5