Angular Material: error TS2339: Property 'menu' does not exist on type 'TableComponen-CodePudding

Im using Angular Material to build a table, which is supposed to have a menu and menu items for each row in the table. The .html file is

<!-- action column -->
<ng-container *ngIf="rowActionIcon?.length" [matColumnDef]="rowActionIcon">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell  *matCellDef="let element" [id]="rowActionIcon" (click)="emitRowAction(element)">
    <button mat-button [matMenuTriggerFor]="menu">
      <mat-icon>{{rowActionIcon}}</mat-icon>
    </button>
    <mat-menu #menu="matMenu" *ngFor="let action of menuActions">
      <button mat-menu-item>{{action}}</button>
    </mat-menu>
  </td>
</ng-container>

But the compiler is complaining that

error TS2339: Property 'menu' does not exist on type 'TableComponent'.
19                     <button mat-button [matMenuTriggerFor]="menu">
                                                               ~~~~

If i look at the documentation for menu, I can't see any declarations of this specific attribute in the examples: https://material.angular.io/components/menu/examples

Im obviously missing something (noob at Angular and Material) but I thought menu in the button referred to the #menu DOM element in the <mat-menu> tag?

I have no specification of the MatMenu in the ts file. Do I need to add that?

CodePudding user response：

I think your problem is with *ngFor because you create many menus, try this

<ng-container *ngIf="rowActionIcon?.length" [matColumnDef]="rowActionIcon">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell  *matCellDef="let element" [id]="rowActionIcon" (click)="emitRowAction(element)">
    <button mat-button [matMenuTriggerFor]="menu">
      <mat-icon>{{rowActionIcon}}</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item *ngFor="let action of menuActions">{{action}}</button>
    </mat-menu>
  </td>
</ng-container>

CodePudding user response：

I guess your problem is in ngFor:

<mat-menu #menu="matMenu" *ngFor="let action of menuActions">
   <button mat-menu-item>{{action}}</button>
</mat-menu>

You can replace it with:

<mat-menu #menu="matMenu">
   <button *ngFor="let action of menuActions" mat-menu-item>{{action}}</button>
</mat-menu>