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

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

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

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

来自下一行：

<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);
  })
}

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

How to prevent checkbox to be selected when click anywhere on row?

selection

angular

angular7

mat-table