是否可以使用ngrx加载块中的可观察更改

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了是否可以使用ngrx加载块中的可观察更改相关的知识,希望对你有一定的参考价值。

我正在观察一系列可过滤的物品。现在我只有大约600个元素。

每当选择所有600时,渲染期间都会出现滞后以实际重绘这些组件。

我想知道是否可以观察集合中的更改,但是一次只能获取一大块元素,直到整个集合被加载。


因为这里有一个例子是我目前的选择。

可观察到的

this.temperatures$ = this.store.select(state => state.weatherState.filteredTemperatures);

模板

<mat-accordion>
    <div *ngFor="let temp of temperatures$ | async">
        ...
    </div>
</mat-accordion>
答案

我不是说渲染600个元素是个好主意,应该使用一些分页。

但是,我认为渲染600个元素应该不是问题。

首先,将代码分成2个组件,比如listitem

从您想要绘制列表的位置,而不是:

<mat-accordion>
    <div *ngFor="let temp of temperatures$ | async">
        ...
    </div>
</mat-accordion>

像这样调用列表组件:

<mat-accordion>
  <list [list]="temperatures$ | async"></list>
</mat-accordion>

当你使用ngrx时,我认为这个列表是不可变的,因此,用list设置你的ChangeDetectionStrategy.OnPush组件。

只要未修改列表,Angular就不会在每次更改检测时检查所有绑定。

其次,确保您的列表没有完全重绘。在你的trackBy上使用ngFor

因此,从list组件,您现在可以访问列表(而不是可观察的列表)。你可以做:

html

<div *ngFor="let item of list; trackBy: trackByFn">
  <item [item]="item"></item>
</div>

TS(在您的组件类中):

trackByFn(index, item) {
  // return something unique from your item, probably its ID
  return item.id;
}

最后,不要忘记将项目组件设置为OnPush。

让我知道,在那之后穿孔是否正常:)

以上是关于是否可以使用ngrx加载块中的可观察更改的主要内容,如果未能解决你的问题,请参考以下文章

InfoWindow中的Android Google地图摘要自动更新

是否可以动态编译和执行 C# 代码片段?

Chrome-Devtools代码片段中的多个JS库

是否可以在OnStop()上回收所有数据并使用保留片段?

将变量从商店绑定到角度ngrx中的组件

分享前端开发常用代码片段