角度材料菜单 每个垫行单击该行

Question

我有这个材料表：

<table mat-table
[dataSource]="dataSource">
<ng-container matColumnDef="id">
<th mat-header-cell
*matHeaderCellDef>ID</th>
<td mat-cell
*matCellDef="let report"
[innerText]="report.id"></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['id']"></tr>
<tr mat-row *matRowDef="let row; columns: ['id'];"></tr>
</table>

我正在尝试为mat-row实施[matMenuTrigger].每一行都有自己的mat-menu，具有report的属性。

问题是我能做到

<tr mat-header-row *matHeaderRowDef="['id']" [matMenuTriggerFor]="rowMenu"></tr>

但是我没有对reportMenu的引用，因为我只能在某些matColumnDef中定义reportMenu：

<ng-container matColumnDef="id">
<th mat-header-cell
*matHeaderCellDef>ID</th>
<td mat-cell
*matCellDef="let report"
[innerText]="report.id"></td>
<mat-menu #reportMenu="matMenu">
{{ report.name }}
</mat-menu>
</ng-container>

当我提到mat-row时，我没有提到report本身。我该如何解决此问题？

Answer 1

把菜单放在桌子外面。别担心，它会起作用的。

然后，按照文档将数据提供给菜单。

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

Answer 2

在里面ng-container matColumnDef除了 mat-cell 元素之外的其他所有元素都将被忽略。这是设计使然。

可能懒惰呈现的菜单是解决方案？您可以轻松地将行数据传递给matMenuContent以每行呈现不同的菜单。