angular - 如何在不冻结的情况下处理传单地图上http请求的中大型结果

Question

我正在使用 Angular 创建仪表板。我正在调用包含空间数据的 Server PostGIS，以将其可视化到我的传单地图中。当我加载我的页面时，一切正常。

步骤是：

• 定义一个向服务器发出请求的服务；

getDoors(): Observable<any> {
    return this.http
      .get(this._endpoint+'/api/doors')
      .pipe(
        tap(_ => console.log('fetched doors')),
        catchError(this.handleError('getDoors')),
        map(this.extractData)
      );
  }

• 在我调用的组件中：

this.serverRequest.getDoors().subscribe(res => this.doors = res);

• 为了在我的模板中显示结果，我使用 [1]

<div *ngIf="doors">        
      <app-map [data]="doors"></app-map>        
</div>

..other template component ..

考虑到我们正在谈论 http 调用 [2]，我不会取消订阅。

正如预期的那样，一切正常。但是考虑到我的查询的大量结果（约 5000 个结果），在地图上显示它们之前经过几秒钟，页面和其他组件就会冻结。

我会得到什么？ 我希望创建我的地图和其他组件，并在可用时添加数据。

参考

[1] https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components

[2] Http 方法创建的 observables 是否需要取消订阅？

标签： angularhttp