如果在 Angular 2+ 中选中了三个以上，则禁用复选框

Question

我已经用角材料创建了一个表格，我将比较三行的数据。 现在，如果我选中了三个复选框，则必须禁用所有其他复选框。 我知道我可以使用材料表中的 [disabled] 状态，但是如果我选中三个框，则所有框都被禁用。 但我必须取消选中复选框，以便我可以更改集合。

我怎么能写一个if else语句？

工作树

Answer 1

只需在禁用状态添加 !selection.isSelected(row) ：

 <!-- Checkbox Column -->
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectRow($event, row) : null" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row) == true" [disabled]="disableBoxes && !selection.isSelected(row)"
      >
      </mat-checkbox>
    </td>
  </ng-container>

工作演示