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

Question

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

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

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

---

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

可观察到的

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

模板

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

Answer 1

我不是说渲染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。

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