Angular 对于单击的每个单选按钮，mdl收音机和NGF保持选中状态

我有三个产品阵列和一个变量来保存当前阵列作为选择：

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>

 <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>

{{product}}


{{product.description}}
看法
购物车

在此之前，无论用户单击哪个单选按钮，都会在我的mdl卡中填充正确的数组，但是用户一个接一个单击的所有单选按钮都会保持单击状态，而不仅仅是当前选择：

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;

---

我做错了什么？

您应该使用

md无线电组对它们进行分组，如下所示

<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>


{{product}}
我更新了for循环，如下所示：

  <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>

 <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>


{{product}}

首先，谢谢！md无线电组是否有打字错误，即mdl而不是md？另外，如果我把它交给mdl电台，它会给我一个错误，说它不是一个已知的元素。你使用的是什么版本的材料设计？