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

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

从下面的行：

readonly

删除：

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

这就是说，只要您单击行选择就必须更改角度。

和

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

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

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

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

在t和td上使用（click）=“ $ event.stopPropagation（）”可以帮助。但这应该是更合乎逻辑的方式