Javascript 离子（角度）崩溃时出现多个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>

问题是什么？它调用端点的次数（直到页面崩溃才停止）。 有些甚至被取消了

---

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

以下是我的假设

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

//组件中声明的变量
farmData:Array=[]；
numberOfAnimals:Array=[]；
恩戈尼尼特（）{
const id=of（this.farmData.map（elem=>elem.id））；
//别忘了退订
管道内径(
concatMap（（val）=>{
返回此.getNumberOfAnimals（val）.pipe（map（（elem）=>{
常数项={
id:val，
编号：elem，
}
返回此.numberOfAnimals.push（项目）；
}))
})
).subscribe（）；
}
getNumberOfAnimals（val）：可观察{
//您的api调用
返回（{number:20}）
}
callFromYourHTML（id:number）{
返回这个.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>

{{farm？.name}
{{callFromYourHTML（farm？.id）| async}

根据经验，您不应该从DOM中调用函数。Angular不知道何时调用函数，因为无法执行状态检查。最好的方法是与API团队一起检查，并尝试在API端处理此问题，并在单个端点上返回所有内容。在循环内调用端点将产生一个大的性能问题。

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