MDL無線電與點擊遺體ngFor每個單選按鈕選擇

我有三個產品陣列和一個變量來保存當前的選擇：MDL無線電與點擊遺體ngFor每個單選按鈕選擇

product_types=['One', 'Two', 'Three'] 

product_type_one = [ 
{'description': 'Type one sample one', 'type': 'one'}, 
{'description': 'Type one sample two', 'type': 'one'}, 
{'description': 'Type one sample three', 'type': 'one'}, 
] 

product_type_two = [ 
{'description': 'Type two sample one', 'type': 'two'}, 
{'description': 'Type two sample two', 'type': 'two'}, 
{'description': 'Type two sample three', 'type': 'two'}, 
] 

product_type_three = [ 
{'description': 'Type three sample one', 'type': 'three'}, 
{'description': 'Type three sample two', 'type': 'three'}, 
{'description': 'Type three sample three', 'type': 'three'}, 
] 

selectedProduct=null;

在我的模板，我填充單選按鈕，使用戶可以選擇的產品羣之一如下：

<div class="my-filters" *ngFor="let product of product_types"> 
    <mdl-radio 
    name="productgroup" 
    value="product" 
    ngModel='selectedProduct' 
    (change)="showProduct(product)" 
    mdl-ripple>{{product}}</mdl-radio> 
    </div><br> 


<mdl-card *ngFor="let product of selectedProduct" class="demo-card-event" mdl-shadow="2"> 
    <mdl-card-title mdl-card-expand> 
    <h4> 
    {{product.description}} 
    </h4> 
</mdl-card-title> 
<mdl-card-actions mdl-card-border> 
    <button mdl-button mdl-colored mdl-ripple (click)="openDialog()"> 
    view 
    </button> 
    <mdl-layout-spacer></mdl-layout-spacer> 
    <mdl-icon>shopping_cart</mdl-icon> 
</mdl-card-actions> 
</mdl-card>

直到這裏無論單選按鈕用戶點擊，正確的數組被填充在我的MDL-卡，但是所有的用戶點擊一個單選按鈕等仍然點擊後不只是目前的選擇：

我在做什麼錯？

來源

2017-07-01 Nitish

你應該使用md-radio-group如下面將它們分組，

<md-radio-group class="productgroup" [(ngModel)]="selectedProduct"> 
    <mdl-radio *ngFor="let product of product_types" 
     value="product" 
     (change)="showProduct(product)" 
     mdl-ripple>{{product}}</mdl-radio> 
</md-radio-group>

來源

2017-07-01 20:13:13 Aravind

首先感謝！是否有與md-radio-group，即mdl而不是md的拼寫錯誤？另外，如果我將其設置爲mdl-radio-group，它會告訴我錯誤，說它不是已知的元素 – Nitish

您使用的是什麼版本的材料設計？ – Aravind

我有：「angular2-mdl」：「^ 2.13.2」（http://mseemann.io/angular2-mdl/） – Nitish

我更新了我的for循環像下面：

<div *ngFor="let product of product_types" class="my-filters"> 
    <mdl-radio name="productgroup" [value]='product' [(ngModel)]="selectedProduct" (change)="showProduct(product)"> {{product}} </mdl-radio> <br> 
    </div>

來源

2017-07-07 08:09:37 Nitish

MDL無線電與點擊遺體ngFor每個單選按鈕選擇

回答

相關問題