Javascript 具有角度2的观测值的流式（实时）数据

我正在构建一个从API加载数据的仪表板，我们没有实时的数据流，所以我们的解决方案是让http获得全部10秒。 我们的问题是，仪表板开始工作非常缓慢，很难单击

我想知道在不影响应用程序运行的情况下，最好的方法是什么。 我们还与ngrx/store合作更新仪表板中的数据。 以下是代码片段：

timer$: Observable<number> = Observable.timer(0, 10000);
loadBlocksPlantings(reload: boolean = false) {
    if (this.loaderFields$ && !reload) {
      return;
    }
    let numberLoads: number = 0;
    console.log(`FieldsService.loadBlocksPlantings() firstTime... (${new Date()})`);
    this.loaderFields$ = this.timer$.switchMap((time: number) => {
     return Observable.forkJoin(
        [
          this.blocksService.loadBlocksObservable(),
          this.plantingsService.loadPlantingsObservable()
         ]
       );
    })
    .subscribe(
      ([blocks, plantings]: [Block[], Planting[]]) => {
        console.log(`FieldsService.loadBlocksPlantings() loading... (${new Date()})`);
        let blockMap: Map<string, Block> = Map<string, Block>();
        let plantingsMap: Map<string, Planting> = Map<string, Planting>();
        blocks.forEach((block: Block) => {
          blockMap = blockMap.set(block._id, block);
        });
        plantings.forEach((planting: Planting) => {
          plantingsMap = plantingsMap.set(planting._id, planting);
        });
        // Here if already load once next time only update part of the data
        if (numberLoads > 0) {
           this.store.dispatch({type: PLANTINGS_ACTIONS.RELOAD_PLANTINGS, payload: plantingsMap});
           numberLoads++;
           return;
        }
        this.store.dispatch({type: BLOCKS_ACTIONS.ADD_BLOCKS, payload: blockMap});
        this.store.dispatch({
          type: POLYGONS_ACTIONS.ADD_POLYGONS, payload: {
            blocks: blockMap,
            plantings: plantingsMap
          }
        });
        this.store.dispatch({type: PLANTINGS_ACTIONS.ADD_PLANTINGS, payload: plantingsMap});
        numberLoads++;
        this.store.dispatch({type: LOADER_ACTIONS.LOADED});
      }
    );
  }

timer$：Observable=Observable.timer（0,10000）；
LoadBlocksPantings（重新加载：布尔值=false）{
if（this.loaderFields$&&！reload）{
返回；
}
设numberLoads:number=0；
log（`FieldsService.LoadBlocksPantings（）firstTime…（${new Date（）}）`）；
this.loaderFields$=this.timer$.switchMap（（时间：number）=>{
返回可观察的forkJoin(
[
this.blocksService.LoadBlocksBServable（），
this.planningsService.loadPlantingsObservable（）
]
);
})
.订阅(
（[街区，种植]：[街区，种植]）=>{
log（`FieldsService.LoadBlocksPantings（）加载…（${new Date（）}）`）；
let blockMap:Map=Map（）；
let plantingsMap:Map=Map（）；
blocks.forEach（（block:block）=>{
blockMap=blockMap.set（block.\u id，block）；
});
种植。forEach（（种植：种植）=>{
plantingsMap=plantingsMap.set（planting.\u id，planting）；
});
//这里如果已经加载一次，下次只更新部分数据
如果（数字负载>0）{
this.store.dispatch（{type:PLANTINGS\u ACTIONS.RELOAD\u PLANTINGS，payload:plantingsMap}）；
numberLoads++；
返回；
}
this.store.dispatch（{type:BLOCKS\u ACTIONS.ADD\u BLOCKS，payload:blockMap}）；
这是我的商店({
类型：多边形\动作。添加\多边形，有效载荷：{
区块：区块图，
种植：种植地图
}
});
this.store.dispatch（{type:PLANTINGS\u ACTIONS.ADD\u PLANTINGS，payload:plantingsMap}）；
numberLoads++；
this.store.dispatch（{type:LOADER\u ACTIONS.LOADED}）；
}
);
}