角2：ラジオボタンが期待どおりに機能しない

Question

私はショッピングカートのアイテムを繰り返してテーブルを作成しています。各アイテムについて、ラジオボタンの配信方法の列を作成します。ラジオボタンを使用すると、3つの配信方法（STORE PICKUP、TRUCK DELIVERY、PARCEL）のいずれかを選択できます。

表の行が作成され、各行には3つの異なるラジオボタンが選択できます。問題は、「STORE PICKUP」というラジオボタンが1つの行で選択された場合などです。たとえば、「STORE PICKUP」ラジオボタンがすべてテーブルの各行で選択されている場合です。私は選択された特定の行のラジオ "STORE PICKUP"だけを期待しています。私は間違って何をしていますか？

<tr *ngFor="let item of cartService.cart.items"> 
     <td class="lgcol"> 
     <a [routerLink]="['/product', item.product._id]"> 
      <img src="..\assets\image\{{getDisplayImage(item.product, item.color)}}" > 
      <br/><br/> 
      <p>{{item.product.name}}</p> 
      </a> 
     <p>Item #{{item.product.model}}</p> 
     </td> 
     <td class="lgcol"> 
     <p *ngFor="let delivery of dataService.deliveryMethods"> 
      <input type="radio" name="deliveryMethod" [(ngModel)]="item.deliveryMethod" 
       [value]="delivery.value"> 
      {{delivery.label}} 
      </p> 
     <br> 
     </td> 
</tr> 

カートアイテムクラス：

export class CartItem { 
    product: Product; 
    quantity: number; 
    itemTotal: number; 
    color: string; 
    protectionPlan: string; 
    deliveryMethod: string; 
} 

方法を届け：

deliveryMethods = [ 
    { value: 'Store Pickup', label: 'Store Pickup' }, 
    { value: 'Truck Delivery', label: 'Truck Delivery' }, 
    { value: 'Parcel Shipping', label: 'Parcel Shipping' },  
] 

Answer 1

あなたはcart.itemのラジオボタンのグループに異なるname属性を割り当てる必要があります。あなたのラジオの名前はすべてinputなので、同じものとみなしました。あなたがあなたのすべてのラジオボタンは、同じ名前を持つcart.itemsインデックスのようなname="deliveryMethod{{i}}"

<tr *ngFor="let item of cartService.cart.items;let i=index;"> 
    <td class="lgcol"> 
     <a [routerLink]="['/product', item.product._id]"> 
      <img src="..\assets\image\{{getDisplayImage(item.product, item.color)}}" > 
      <br/><br/> 
      <p>{{item.product.name}}</p> 
     </a> 
     <p>Item #{{item.product.model}}</p> 
    </td> 
    <td class="lgcol"> 
     <p *ngFor="let delivery of dataService.deliveryMethods"> 
      <input type="radio" name="deliveryMethod{{i}}" 
       [(ngModel)]="item.deliveryMethod" [value]="delivery.value" /> 
      {{delivery.label}} 
     </p> 
     <br> 
    </td> 
</tr>