如果重新分配值，ngFor async 会继续重建

Question

我有以下代码，

<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 " 但还是不行。

Answer 1

您的想法是对的，但是您以错误的方式定义了 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;
}

可以找到一个工作示例in this blitz

如果重新分配值，ngFor async 会继续重建

ngFor async keep rebuilding if values are reassigned

angular-template

angular-material

angular