时间戳

首页 > 解决方案 > Ionic（Angular）崩溃的多个http调用问题

javascript - Ionic（Angular）崩溃的多个http调用问题

问题描述

我有模板中的项目列表

<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))
}

问题是什么 - 它正在调用端点次数（在页面崩溃之前不停）。其中一些甚至显示为已取消。

你有什么想法为什么以及如何解决这个问题？

标签： javascriptangularionic-frameworkhttpclientionic5

解决方案

这是我对此答案的假设

  • 您没有接受多个 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>

推荐阅读