Question

如何在Angular Material表中单击按钮的相应行？在行下，我的意思是一个对象，在这里可以看到该行所有单元格的所有值。

类似这样的东西：

<tr mat-row *matRowDef="let row; columns: displayedColumns;" 
(mouseenter)="selection.select(row)" 
(mouseleave)="selection.deselect(row)"
[ngClass]="{ 'selected': selection.isSelected(row)}">
</tr>

这是一种工作方式：

<tr>

当我将光标悬停在一行上时，我使用 selection 属性在onEdit() { console.log(this.selection.selected); }标记中设置该行。然后，当点击编辑按钮时，设置了 selection.selected 道具，我可以从打字稿中使用它

{{1}}

但是我不喜欢这种方式，因为如果用户使用“选项卡”按钮导航到“编辑”按钮并按下回车键-他将得到错误的行或未定义的行，因为悬停从未发生。

Answer 1

根据我的工作设置尝试此操作。我确定关于元素，但是行有效。在此列中，我有三个按钮用于处理会员信息。

Stackblitz example

    <ng-container matColumnDef="EditButtonCol">
      <th mat-header-cell *matHeaderCellDef> EditButtonCol </th>
      <td mat-cell *matCellDef="let row">
        <button mat-button (click)="viewProfile(row.member_id)">View</button>
        <button mat-button (click)="deleteRecord(row.member_id)">Delete</button>
        <button mat-button (click)="editRecord(row.member_id)">Edit</button>
      </td>
    </ng-container>

Answer 2

这有效

<button mat-button (click)="onEdit(element)">Edit</button>

获取在Angular Material表中单击的按钮的对应行

2 个答案: