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每个单选按钮选择

回答

相关问题