使用* ngFor渲染增量更新？

Question

如果我们有Observable<Todo[]>，如下所示，是否可以为模板提供增量更新？例如，如果Observable<Todo[]>从BehaviorSubject的next()调用获得值，那么可以广播增量变化。我目前的理解是它必须广播整个新阵列，但我想看看这个空间中是否有可用的东西？

 template: '<todo *ngFor="let todo of todos$ | async" [todo]="todo"><todo>'

背景

我正在尝试设计一个反应性的Entity商店，客户可以订阅商店的流媒体订阅源。例如，我们可以这样做：

const todoStore = new Store<Todo>();
const all:Observable<Todo[]> = todoStore.selectAll();

要么

const add:Observable<Todo[]> = todoStore.selectAdd();

因此，如果我们可以使用模板渲染进行增量更新，那么BehaviorSubject<Todo>只需要广播刚刚添加的下一个Todo实例，从而提高效率。

通过指定由符号UUID键入的const ID = Symbol('GUID')来跟踪所有实例。 todo[ID] = uuid()。

Answer 1

渲染列表时，通常使用*ngFor，您可以使用trackBy。它可以帮助Angular理解和跟踪在列表中添加或删除的元素，并借助其唯一标识符。

现在，只要列表发生更改，Angular就会跟踪添加或删除的项目，并仅创建或销毁更改的项目。

以下是如何实现它

在你的模板中：

<todo 
  *ngFor="let todo of todos$ | async;trackBy: trackByFunction" 
  [todo]="todo">
<todo>

在你的TypeScript类中：

trackByFunction(index, item) {
  return item.uniqueIdentifier || index;
}

更好的方法是在item上返回id或唯一标识符（如果有）。