Angular 2: Optionsfeld funktioniert nicht wie erwartet

Question

Ich erstelle eine Tabelle, indem ich die Artikel in einem Einkaufswagen durchblättere. Für jeden Artikel erstelle ich eine Spalte mit einer Liefermethode mit Optionsfeldern, über die der Benutzer eine von drei Liefermethoden auswählen kann (STORE PICKUP, TRUCK DELIVERY, PARCEL).

Die Tabellenzeilen werden erstellt, jede Zeile hat drei verschiedene Optionsfelder, die ausgewählt werden können. Das Problem besteht darin, dass bei Auswahl eines Optionsfelds in einer Reihe, z. B. "STORE PICKUP", alle Radioknöpfe "STORE PICKUP" für jede Zeile in der Tabelle ausgewählt werden. Ich erwarte nur das Radio "STORE PICKUP" für die bestimmte Zeile die ich ausgewählt habe. Was mache ich falsch?

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

Wagen Artikel Klasse:

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

Deliver Methoden:

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

Answer 1

sollten Sie verschiedene name Attribut für die Gruppe von Radiobutton von cart.item zuweisen. Da Sie den gleichen Namen für alle Ihre Radio input haben, betrachteten sie als gleich.

Für das Problem lösen könnten Sie Namen mit cart.items Index wie 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>