Angular: динамически обновляемые элементы / элементы mat-menu не обновляют представление

Question

У меня есть меню материала (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>

Проблема заключается в том, что этот список пунктов меню-меню, кажется, отображается только один раз. Просто экспериментируя, я обнаружил, что если я инициализирую массив searchHistoryList, который привязан к этому шаблону, с некоторыми жестко заданными значениями, они отображаются в списке пунктов меню. Однако, если я программно добавляю значения в массив searchHistoryList во время выполнения, они не отображаются.

Что я делаю не так?

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