为啥我的 UI 会冻结，直到 api 调用终止？

Posted 2023-03-31

【中文标题】为啥我的 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 方法。也许修复了！

【参考方案1】：

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

【讨论】：

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