Angular：动态更新 mat-menu-item(s) 不会更新视图答案

【问题标题】：Angular: Dynamically updating mat-menu-item(s) does not update the viewAngular：动态更新 mat-menu-item(s) 不会更新视图
【发布时间】：2020-06-30 16:36:52
【问题描述】：

我有一个从历史图标按钮触发的材料菜单 (mat-menu)，其中应该包含用户搜索过的帐户的运行列表。

在课堂上：

searchHistoryList: Array<string>; // populated dynamically while the app is in use

在视图中：

<button mat-icon-button [matMenuTriggerFor]="accountHistoryList">
    <mat-icon>history</mat-icon>
</button>

<mat-menu #accountHistoryList="matMenu">
    <button mat-menu-item *ngFor="let acc of searchHistoryList">
      <button mat-menu-item (click)="loadCustomer(acc)">{{acc}}</button>
    </button>
</mat-menu>

问题是这个 mat-menu-item(s) 列表似乎只呈现一次。刚刚试验我发现，如果我用一些硬编码值初始化绑定到这个模板的 searchHistoryList 数组，它们就会显示在菜单项列表中。但是，如果我在运行时以编程方式将值添加到 searchHistoryList 数组，则不会显示。

我做错了什么？

【问题讨论】：

标签： angular menu angular-material angular2-template menuitem

【解决方案1】：

您需要使用trackByFn 来告诉 Angular 您的集合已更改并且需要重新渲染。

<mat-menu #accountHistoryList="matMenu">
    <button mat-menu-item *ngFor="let acc of searchHistoryList;trackBy=trackByMethod">
      <button mat-menu-item (click)="loadCustomer(acc)">{{acc}}</button>
    </button>
</mat-menu>

功能定义：

trackByMethod(index:number, el:any): number {
    return el.id;
  }

【讨论】：