為什么我的 UI 在 api 呼叫終止之前會凍結？

Question

我有一個 API 的電話，它下載了所有意大利城市，將近 8000。問題是頁面加載了 HTML，但在 API 電話結束之前我無法點擊任何東西。

ngAfterViewInit(){
    this.loadComuni();
}
loadComuni(){
   //Italian municipalities
   this.RegisterService.getMunicipalities().subscribe(
      obj=>{
        this.city=obj;
      },
      error=>{
        console.log("error", error);
   });
}


<div class="col-12 col-lg-4"">
 <select id="cbComNasc" class="form-control" formControlName="cbComNasc">
      <option *ngFor="let c of city" [ngValue]="c.citta">{{c.citta}}</option>
 </select>
</div>



//getMunicipalities
  public getMunicipalities():Observable<Comuni[]>{
    const httpOptions = {
      headers: new HttpHeaders({
        "Content-Type": "application/json; charset=UTF-8",
        'Accept':  'application/json'
      })
    }; 
    return this.HttpClient.get<Comuni[]>(environment.apiURL+"api/v1/gestionale/GetComuni",httpOptions)
  }

我也嘗試使用異步 pipe 或 promise，但問題是一樣的。

Answer 1

我也有同樣的問題。 如果您有大量數據，ngFor 將需要一些時間來呈現它們，因此有一個單獨的數組並最初呈現 10 到 20 條記錄，如果用戶滾動到底部再呈現 10 t0 或具有分頁功能。