使用粘性表末尾的更多按钮，将Angular材质菜单添加到Angular材质表的每一行

Question

我有一个粘性表，想添加more_vert button切换开关，但是我无法实现，因为我不知道如何将每个drop down menu list彼此区分开。

此表是来自REST API的用户数据的列表，每行的菜单应显示： - delete user - edit user profile 当我点击more button

到目前为止，我一直遵循“材料菜单”和“粘滞表”的文档，但是每次单击按钮以在任何行上显示下拉菜单

     <ng-container matColumnDef="actions" stickyEnd>
         <th mat-header-cell *matHeaderCellDef mat-sort-header> </th>                  
         <td mat-cell *matCellDef="let user"> 
            <button mat-icon-button [matMenuTriggerFor]="user.user_id" aria-label="">
                <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #appMenu="user.user_id">
              <button mat-menu-item>Delete</button>
              <button mat-menu-item>Edit</button>
            </mat-menu>  
        </td>
     </ng-container>

Answer 1

您引用的菜单错误。 [matMenuTriggerFor] =“ user.user_id” 应该是[matMenuTriggerFor] =“ appMenu”

Answer 2

您需要使用：

<mat-menu #appMenu="matMenu">
  <ng-template matMenuContent let-name="name">
    <button mat-menu-item>Settings</button>
    <button mat-menu-item>Log off {{name}}</button>
  </ng-template>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{name: 'Sally'}">
  <mat-icon>more_vert</mat-icon>
</button>

<button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{name: 'Bob'}">
  <mat-icon>more_vert</mat-icon>
</button>

More info he