angular - 单击列时，角表防止行单击

Question

当我点击表格行时，它应该展开并显示一些额外的数据，但是当我点击一列时，它不应该展开行，而不是执行列点击。

我已经简化了代码，请在此处查看完整的代码示例

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element" (click)="weightCicked(element)"> {{element.weight}} </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row (click)="rowclicked(row)" *matRowDef="let row; columns: displayedColumns;"></tr>

当我点击weight列时，rowClicked也被调用，我怎么能只调用weightCicked方法？

标签： angularangular-material

Answer 1

您可以$event.stopPropagation();在绑定(click)时添加td

<td mat-cell *matCellDef="let element" (click)="weightCicked(element); $event.stopPropagation();"> {{element.weight}} </td>