Угловой: динамическое обновление mat-menu-item (s) не обновляет представление

У меня есть меню материалов (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 во время выполнения, они не отображаются.

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


menu angular menuitem angular-material angular2-template
person JL Gradley    schedule 19.03.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно использовать trackByFn inorder, чтобы сообщить 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;
  }
person Eldar    schedule 19.03.2020