mat-menu in ngFor doesn't work in production build (Angular 4)

1
votes

I was attempting to create a list with a menu for each list items using ngFor in Angular 4. The menus work when building in development mode but it doesn't work properly when building in production mode. When I click the button on the list item, the menu toggles on but clicking in other places will not toggle it off. Below is the code I am using.

<mat-list>
    <a mat-list-item *ngFor="let forest of forests">
        <h4 mat-line>{{ forest.name }}</h4>
        <mat-menu #m="matMenu">
          <button mat-menu-item (click)="onEdit(forest)"> Edit </button>
          <button mat-menu-item (click)="onDelete(forest)"> Delete </button>
        </mat-menu>

        <button mat-icon-button [matMenuTriggerFor]="m"><mat-icon>more_vert</mat-icon></button>
        <mat-divider></mat-divider>
    </a>
</mat-list>
1
angular
seems like your code fails,... ng serve should show some error message(s) post them as well as the corresponding code - Nickolaus
To my surprise there is no error displayed in the console other than "Failed to load resource: net::ERR_EMPTY_RESPONSE favicon.ico". Is it ok to use the local reference #m in *ngFor? - user1846798
any errors on: ng build –prod –aot - Nickolaus
Still no luck. This is the only error I see. "Failed to load resource: net::ERR_EMPTY_RESPONSE favicon.ico" - user1846798

1 Answers

0
votes

Adding ngDoCheck life cycle hook in the component solved the problem.

ngDoCheck(): void {}