获取在Angular Material表中单击的按钮的相应行-Java 学习之路

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

像这样的东西：

<ng-container matColumnDef="EditButtonCol">
  <th mat-header-cell *matHeaderCellDef>EditButtonCol</th>
  <td mat-cell *matCellDef="let element">
    <button mat-button (click)="onEdit(CORRESPONDING-ROW)">Edit</button>
  </td>
</ng-container>

这是一种工作方式：

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

当我将光标悬停在一行上时，我使用 selection 属性来设置 <tr> 标记中的行 . 然后在单击编辑按钮时， selection.selected prop已设置，我可以从typescript中使用它

onEdit() {
console.log(this.selection.selected);
}

但我不喜欢这种方式，因为如果用户使用“tab”按钮导航到“编辑”按钮并按下输入 - 他将获得错误的行或未定义因为悬停从未发生过 .

2 回答

根据我的工作设置尝试这个 . 我确定元素但行有效 . 我在此列中有三个按钮用于处理成员信息 .

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>

回复于 2024-04-19T15:42:56+08:00

这有效

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

回复于 2024-04-19T15:42:56+08:00

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

2 回答

相关问题