javascript-具有唯一选择的材质复选框

我在angular2引导程序材料项目中为这个问题苦苦挣扎了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>

我的想法是将元素绑定到这样的click事件

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

解决方法:

设置一个属性以跟踪选中了哪个.然后仅对所选的一项设置[已检查].例如,在这里,我使用ngFor索引进行跟踪：

<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