Matière CheckBox avec sélection UNIQUE

Question

Je me bats depuis 2 jours sur ce problème dans mon projet matériel angular2 + bootstrap +.

Je dois changer la case de conception matériel:

• Quand je vérifie une case à cocher de ma table, que l'enregistrement doivent être le seul

Je sais que je peux utiliser un bouton radio matériel, mais dans ce cas j'ai un autre problème: je ne peux pas décocher le bouton radio.

Je dois donc activer les fonctions de vérification unique et de vérification/décocher.

J'ai essayé les suivantes

• Interagir avec les dom avec document.getElement.blablabla
• interpolation dom occasion de angulaire 2
• fonction Javascript
• fonction Jquery

est ici le Code de 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> 

Mon idée était de lier l'élément à un événement click comme celui-ci

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

Answer 1

Définir une propriété de garder une trace dont une est vérifié. Et puis définissez [coché] pour seulement celui qui est choisi. Ici, par exemple, je garde la piste avec l'index 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