仍然能够 select 禁用 Mat table 中的复选框

Question

我有一个带有复选框列的 Mat table。我根据某些条件将某些复选框设置为禁用。但是，如果单击该行，用户仍然可以 select 复选框。如何防止复选框在禁用时被 selected：这是我从 material 设计站点派生的一个 stackblitz 示例：https://stackblitz.com/edit/angular-erpaus?file=app%2Ftable-selection-example.html. you can't click the check box but if you click outside of it the checkbox gets selected:

<mat-checkbox (click)=      "$event.stopPropagation()"
                              (change)="$event ? selection.toggle(row) :null"
                              [checked]="selection.isSelected(row)" 
                              [disabled]="myCondition"
                               color="primary">
                </mat-checkbox>

Answer 1

我认为，当您单击行时，该行是 select。在您的代码中：[checked]="selection.isSelected(row)" 检查行是否被 selected 并且当此表达式 return 为真时，复选框将 select 因此您必须在之后关闭 selecting 行点击

Answer 2

正如@AmitBaranes 所说，删除 (click)="selection.toggle(row)" 应该有效，但如果条件为 true，您将无法 select 一行。如果您想禁用某些行并启用其他行，您可以实现这样的条件 (click)="!row.excluded && selection.toggle(row)"。请参阅 stackblitz 中的完整示例。

仍然能够 select 禁用 Mat table 中的复选框

Still able to select disabled checkbox in Mat table

checkbox

angular

mat-table