Рендеринг инкрементных обновлений с * 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, если он есть.