为什么我的 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)
  }

我也尝试过使用异步管道或 Promise，但问题是相同的。

Answer 1

我也有同样的问题。如果您有大量数据，ngFor 将需要一些时间来渲染它们，因此有一个单独的数组并最初渲染 10 到 20 条记录，如果用户滚动到底部则渲染 10 t0 更多或具有分页功能。