具有UNIQUE选择的材质CheckBox

Question

在我的angular2 + bootstrap +材料项目中，我在2天内遇到了这个问题。

我需要更改材料设计复选框：

• 当我从我的表格中选中一个复选框时，该检查必须是唯一的

我知道我可以使用材料单选按钮，但在这种情况下我还有另一个问题：我无法取消选中单选按钮。

所以我需要启用唯一检查并检查/取消选中功能。

我已尝试过以下

• 使用document.getElement.blablabla
与dom交互
• 使用角度2的dom插值
• Javascript功能
• Jquery功能

这里是html的代码：

<div class="row">
<div class="col-lg-12">
    <label>Ordini cliente</label>
    <mat-table #table [dataSource]="dataSource">

        <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

        <!-- Select Column -->
        <ng-container matColumnDef="Select">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let item"><mat-checkbox color="primary"></mat-checkbox></mat-cell>
        </ng-container>


        //OTHER COLUMNS ...

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>


</div>

我的想法是将元素绑定到像这样的点击事件

<mat-cell *matCellDef="let item"><mat-checkbox (click)="foo()" color="primary"></mat-checkbox></mat-cell>

Answer 1

设置属性以跟踪检查哪一个。然后将[checked]设置为仅选择的那个。例如，在这里，我使用ngFor index保持轨道：

<div *ngFor="let item of [1,2,3];  let i = index">
  <mat-checkbox [checked]="selected === i" (change)="selected = i">Check me!</mat-checkbox>
</div>

DEMO