Angular: Динамичното актуализиране на mat-menu-item(s) не актуализира изгледа

Имам материално меню (мат-меню), задействано от бутон с икона на историята, което трябва да съдържа текущ списък с акаунти, които потребителят е търсил.

В час:

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 по време на изпълнение, те не се показват.

Какво правя нещо нередно?


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

Отговори (1)


arrow_upward
1
arrow_downward

Трябва да използвате 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;
  }
person Eldar    schedule 19.03.2020