使用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>

它應該工作