Question

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

我尝试将(click)="$event.stopPropagation();放在复选框以及容器上，但是没有用。我还尝试制定一个指令，如In Angular, how to stopPropagation() of TR click event when checkbox has change event?所示但这仍然不能阻止(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>

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>

它应该可以工作

与角如何在表行内的复选框单击事件的stopPropagation（）？

1 个答案: