ngFor асинхронное восстановление, если значения переназначены - PullRequest
Новая
       35

ngFor асинхронное восстановление, если значения переназначены

1 голос
/ 06 июня 2019

StackBlitz

У меня есть следующий код, 

<div *ngFor="let obj of myObjs$ | async">
  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>{{obj.name}}</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>
</div>

Мой ngFor назначен наблюдаемому (что в реальном подобии является селектором из NGRX)>

Я делаю это потому, что когда загружается новый элемент, я хочу, чтобы меню автообновлялось, а также некоторая информация в меню основана на состоянии объекта, и я также хочу, чтобы он обновлялся.

Проблема в том, что ngFor постоянно перестраивает DOM, и когда я открываю matmenu, если он перестраивается, он удаляется и закрывается.

есть ли способ это исправить?

РЕДАКТИРОВАТЬ : я пытался * ngFor = "let obj of MyObjs $ | async; trackBy: obj? .Id", но все еще не работает.

1 Ответ

3 голосов
/ 06 июня 2019

Ваша идея была правильной, но вы неправильно определяете функцию trackBy.Рефакторинг следующим образом: 

<div *ngFor="let obj of items$ | async; trackBy: trackItem">
  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>{{obj.name}}</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>
</div>

import {Component, TrackByFunction} from '@angular/core';

interface Item {
  id:number;
  name:string;
}

@Component({...})
export class FooComponent {
  items$: Observable<Item[]>;
  trackItem: TrackByFunction<Item> = (i, item)=>item.id;
}

Рабочий пример можно найти в этом блице

...