为什么我的 UI 会冻结，直到 api 调用终止？答案

【问题标题】：Why does my UI freeze until the api call is terminated?为什么我的 UI 会冻结，直到 api 调用终止？
【发布时间】：2021-11-17 07:30:44
【问题描述】：

我有一个 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)
  }

我也尝试了异步管道或承诺，但问题是一样的。

【问题讨论】：

您能否在您的RegisterService 下添加getMunicipalities 的代码？
@codeitup 我已经更新了问题，所以你可以看到服务调用。
嗯，我在服务方法中也没有看到任何问题，不确定是什么原因造成的，寻找其他原因，因为 Http 调用本质上是异步的，所以它们永远不会阻塞你的 UI。
@codeitup 我从 F12-> Network 看到调用 api 需要 800 毫秒的响应时间；并且该页面在通话结束之前不是空闲的。
使用ngOnInit 代替ngAfterViewInit 方法。也许修复了！

标签： javascript html angular api httpclient

【解决方案1】：

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

【讨论】：

我并没有完全像那样修复它，但感谢它帮助我的想法