Наблюдаемое из массива в массив наблюдаемых с помощью ngFor

Question

В моем Angular (9) приложении я получаю от WebsocketService наблюдаемый массив объектов, например:

public objects$: Observable<MyClass[]>;

ngOnInit(): void {

  this.objects$ = myWebsocketService.get()

Затем я повторяю это с помощью *ngIf и для каждого объекта вызываю компонент для его рендеринга:

<table>
  <tr *ngFor="let element of objects$ | async">
    <td><my-component [item]="element"></my-component><td>

Это работает. Но это будет означать, что каждый раз, когда объекты $ изменяются, каждый экземпляр my-component должен быть перезагружен. Мне это кажется очень неэффективным! Было бы гораздо лучше: а) перезапускать только те, которые на самом деле изменились, и б) даже не повторно инициализировать мои компоненты, а сохранить их, обработать их наблюдаемыми и подписаться на них. Но я не знаю, как сформулировать такое поведение в сочетании с *ngFor - Любая помощь приветствуется!

Answer 1

Вы можете использовать trackBy на * ngFor для работы с изменениями. Он позволяет вам проверять каждый элемент и повторно визуализировать только те, которые являются новыми. Вы можете использовать идентификатор или другие уникальные элементы для их проверки.

Шаблон:

<tr *ngFor="let element of objects$ | async; trackBy: trackByFunction">
</tr

Компонент:

trackByFunction(index: number; element: MyClass) {
 return element.id; // or another unique property
}

Вот пример, который я сделал несколько дней go на Stackblitz (с сообщением о новых элементах, чтобы пометить их)

Answer 2

Это наблюдаемый элемент. Таким образом, вы можете подписаться на этот объект, а Angular проверять наличие изменений и обновлять вашу переменную без перезагрузки.

Примерно так:

this.yourWebSocketService.yourObservableObject.subscribe( data=> {
    this.objects$ = data
}