angular - 单击行上的任意位置时如何防止选中复选框？

Question

当我单击行上的任意位置时，我的行被选中，即使是我的单选按钮和滑动切换，我希望它仅在用户单击复选框时被选中

selection: SelectionModel<aproveTable> = new SelectionModel<aproveTable>(true, []);
@Output() approveSelectEvent: EventEmitter<aproveTable[]> = new EventEmitter<aproveTable[]>();
ngOnInit() {
        this.selection.changed.asObservable().subscribe(
            (value: SelectionChange<aproveTable>) => {
                this.approveSelectEvent.emit(this.selection.selected);
        });
    }

<ng-container matColumnDef="select">

                <th mat-header-cell *matHeaderCellDef>
                </th>
                <td mat-cell *matCellDef="let row">
                    <mat-checkbox (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)">
                    </mat-checkbox>
                </td>

</ng-container>

Answer 1

从下面一行：

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

消除：

(click)="selection.toggle(row)" -- remove this

这样，您就是在告诉 Angular，每当您单击行选择时都必须更改。

和

<mat-checkbox (click)="changeSelection(row)" [checked]="selection.isSelected(row)">
</mat-checkbox>

写这个，只有复选框切换选择，这里是 changeSelection 方法，

changeSelection(row){
  setTimeout(()=>{
    this.selection.toggle(row);
  })
}

Answer 2

感谢您的 stackblitz 示例，我可以看到错误。您正在对第 78 行中的选择进行额外切换(click)="selection.toggle(row)"，只需摆脱它：

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

现场示例：

https://stackblitz.com/edit/angular-stack-55862476-materialrow?file=app/table-selection-example.html

Answer 3

在 th 和 td 上使用 (click)="$event.stopPropagation()" 有帮助。但这里应该是一些更合乎逻辑的方式