使用UNIQUE選擇材質複選框

我在我的angular2 + bootstrap +材質項目中從這個問題的2天掙扎中掙扎。使用UNIQUE選擇材質複選框

我需要改變材料設計複選框：

當我從表中選中一個複選框，該檢查必須是唯一的一個

我知道，我可以使用一個材料單選按鈕，但在這種情況下，我有另一個問題：我不能取消單選按鈕。

所以我需要啓用獨特的檢查，也檢查/取消選中功能。

我已經試過以下

互動與DOM與document.getElement.blablabla
JavaScript函數
二手DOM插值
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>

來源

2017-10-19 Tommolo

設置屬性，單擊事件跟蹤其中之一被檢查。然後設置[檢查]只有被選中的那個。這裏，例如，我一直跟蹤與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

來源

2017-10-19 16:25:15 Vega

的工作，非常感謝。 ps：我決定使用一個普通的html5表格，然後materializa風格，因爲在材質表格中，我們沒有明確的ngForStaxtax來彎曲我們的邏輯。 – Tommolo

使用UNIQUE選擇材質複選框

回答

相關問題