在 Angular Material 表中使用“更多”按钮为每一行添加 Angular Material 菜单

Question

我有一个粘性表格，想要添加 更多按钮 来切换，但是我无法实现它，因为我不知道如何区分每个 下拉菜单列表。

这张表格是来自REST API的用户数据列表，每行的菜单应该显示： - 删除用户 - 编辑用户资料 当我点击 更多按钮 时。

我已经遵循了 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>

- Toheeb

Answer 1

您引用了错误的菜单。

[matMenuTriggerFor]="user.user_id" 

应该是

[matMenuTriggerFor]="appMenu"

- Sarkani

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

- Fede Dávila

Answer 3

 </table>
  <ng-container matColumnDef="menu" [sticky]="true">
    <th mat-header-cell *matHeaderCellDef> </th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button [matMenuTriggerFor]="menu" (click)="selectedElement = element"
        aria-label="menu options button with a vertical three dot icon">
        <mat-icon>more_vert</mat-icon>
      </button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements">
</mat-paginator>

<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="edit()">
    <mat-icon>edit</mat-icon>
    <span>Edit</span>
  </button>
  <button mat-menu-item (click)="delete()">
    <mat-icon>delete</mat-icon>
    <span>Delete</span>
  </button>
</mat-menu>

@Component({
  // ...
})
export class YourComponent {

  edit() {
    console.log('edit =>', this.selectedElement)
  }
}

我发现当应用程序尝试运行时，matMenuTriggerData会抛出错误，而在菜单点击事件中使用变量selectedElement既可以在菜单上显示数据，也可以将数据传递给处理函数，这样做效果良好。

- Tlotli Otlotleng