是否可以使用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个组件,比如list
和item
。
从您想要绘制列表的位置,而不是:
<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加载块中的可观察更改的主要内容,如果未能解决你的问题,请参考以下文章