с Angular, как остановитьPropagation () флажок события щелчка внутри строки таблицы?

Question

У меня есть угловая таблица материалов со строкой, показывающей клиентов, и другая дочерняя таблица, показывающая их заказы.При нажатии в любом месте строки она расширяет строку для отображения заказов клиентов.Когда я нажимаю на флажок в строке клиента, я не хочу, чтобы открылась дочерняя таблица заказов.Я попробовал пару вещей, но безуспешно.Может кто-нибудь порекомендовать, что будет работать по этому сценариюВаша помощь действительно ценится, спасибо!

Я пытался поставить (click)="$event.stopPropagation(); на флажок, а также на контейнер, и это не сработало.Я также попытался создать директиву, как показано в В Angular, как остановить событие нажатия TR, когда флажок имеет событие изменения? , но это все равно не останавливает (click)="expandCollapse(row) на <tr> собжиг.

Код флажка:

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