使用*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。它帮助角度理解和跟踪哪些元素被添加或从列表中删除，帮助它的唯一标识符。

现在，每当列表发生变化时，角将跟踪添加或删除了哪些项，并且只创建或销毁更改的项。

下面是实现它的方法

在模板中：

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

在你的TypeScript课程中：

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

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