使用Angular如何停止表格行内复选框单击事件的传播（）？

Question

我有一个角度材料表，其中一行显示客户，另一个子表显示他们的订单。 单击行中的任意位置时，它会展开行以显示客户订单。 当我单击客户行中的复选框时，我不希望打开订单子表。 我尝试了几件事，但没有运气。 有人可以推荐什么适用于这种情况。 非常感谢您的帮助，谢谢！

我试过把(click)="$event.stopPropagation();放在复选框上，放在容器上，但没有奏效。我还尝试制定一个指令，如在 Angular, how to stopPropagation() of TR 中所示复选框具有更改事件时的单击事件？但这仍然不会阻止<tr>上的(click)="expandCollapse(row)触发。

复选框代码：

<ng-container *ngIf="column.key == 'all' && column.key !== 'sort'">
  <th mat-header-cell *matHeaderCellDef [style.width.px]="75">
    <mat-checkbox (click)="$event.stopPropagation();
      (change)="$event ? masterToggle() : null"
      [checked]="hasValue() && isAllSelected()"
      [indeterminate]="hasValue() && !isAllSelected()"
    >
    </mat-checkbox>
    <span class="checkbox-text"></span>
  </th>
  <td mat-cell *matCellDef="let row">
    <mat-checkbox
      (change)="$event ? toggle(row.customerId) : null"
      [checked]="isSelected(row.customerId)">
    </mat-checkbox>
  </td>
</ng-container>

父材料行：

<tr mat-row
  [ngClass]="{'highlighted': isSelected(row.customerId) }"
  *matRowDef="let row; columns: columnKeys;" class="example-element-row"
  [class.example-expanded-row]="isSelected(row.customerId)"
  (click)="expandCollapse(row)" id="rowcustomer-{{row.rowIdex}}">
</tr>

Answer 1

如果您遵循 Angular Material ( Angular Material)的文档示例

默认情况下，您的 component.html 文件中会有如下内容：

 <tr mat-row *matRowDef="let row; columns: displayedColumns;"
    (click)="selection.toggle(row)"
 </tr>

您删除点击事件，使其如下所示：

<tr mat-row *matRowDef="let row; columns: displayedColumns;"
 </tr>

它应该工作