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

【问题标题】：Adding Angular material Menu to each row in Angular Material Table using more button at the end of a sticky table使用粘性表末尾的更多按钮将 Angular 材质菜单添加到 Angular 材质表中的每一行
【发布时间】：2020-04-01 22:59:34
【问题描述】：

我有一个粘性表格，我想将 more_vert button 添加到其中，但我无法实现这一点，因为我不知道如何区分每个 drop down menu list。

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

到目前为止，我一直遵循 Material Menus 和 Sticky Table 的文档，但每次单击按钮以在任何行上显示下拉菜单时

     <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>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您引用了错误的菜单。

[matMenuTriggerFor]="user.user_id"

应该是

[matMenuTriggerFor]="appMenu"

【讨论】：

【解决方案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

【讨论】：