Question

我有以下代码，

addEventListener

我的ngFor分配给了一个可观察对象（实际上就是NGRX的选择器）>

之所以这样做，是因为我在加载新元素时希望菜单自动更新，并且菜单中的某些信息基于对象状态，并且我也希望它进行更新。

问题是，ngFor会不断重建DOM，当我打开matmenu时，如果重建，它将被删除并关闭。

有没有办法解决这个问题？

编辑：我尝试了* ngFor =“让MyObjs $的obj | 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异步，如果值已重新分配，请继续重建

1 个答案: