Question

如果我们有一个Observable<Todo[]>，如下所示，是否可以为模板提供增量更新？例如，如果Observable<Todo[]>从BehaviorSubject的{{1}}调用中获取值，则可以广播增量更改。我目前的理解是，它必须广播整个新阵列，但是我想知道是否可以使用此空间中的任何内容？

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')。

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或唯一标识符。

使用* ngFor渲染增量更新？

背景

1 个答案: