禁止点击 angular mat table 中的整行

Question

我有一个 mat-table 全行点击：

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="clickHandler(row)"></tr>

而且我点击了此 table 中的特定行：

<ng-container matColumnDef="test">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> test </th>
                <td mat-cell *matCellDef="let row" (click)="getRecord(row)"> {{row.test}} </td>
</ng-container>

当我点击某些内容时，如何禁止点击整个 row((click)="clickHandler(row)") 单元格 (click)="getRecord(row);

Answer 1

您可以将 $event 发送到 getRecord 方法并调用事件的 stopPropagation();:

 getRecord(row,$event){
       $event.stopPropagation();
       ....
  }

在你的HTML中：

<td mat-cell *matCellDef="let row" (click)="getRecord(row,$event)">

这是我为您创建的工作示例：StackBlitz

禁止点击 angular mat table 中的整行

Disable click on whole row in angular mat table

html

angular-material

angular

mat-table