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

Question

我有一个从历史图标按钮触发的 material 菜单（mat-menu），它应该包含一个运行用户搜索过的帐户列表。

在class中：

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 数组，则不会显示这些值。

我做错了什么？

Answer 1

您需要使用 trackByFn 来告诉 angular 您的 collection 已更改并且需要 re-render。

<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;
  }

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

Angular: Dynamically updating mat-menu-item(s) does not update the view

angular

menu

angular-material

angular2-template

menuitem