angular2 Zweiweg für Radioknopf Bindung

Question

Ich habe ein Array wie diese

erstellt

this.list= [{ 
     id: 1, 
     value: 'One', 
     checked: true 
    }, 
     { 
     id: 2, 
     value: 'Two' 
     }]; 

und ich versuchte, Zwei-Wege-Bindung wie diese

<ul *ngFor="let data of list;"> 

      <div class="radio" > 
       <label> 
       <input type="radio" name="sex" [(ngModel)] = "data.checked" [checked]="data.checked">{{data.value}} 
</ul> 

zu tun, aber es funktioniert nicht i dynamisch wollen aktualisieren Sie die Variable überprüft, wenn Optionsfeld

Answer 1

Sie benötigen geklickt wird Wert hinzuzufügen:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <ul *ngFor="let data of list;"> 
    <li class="radio"> 
     <input type="radio" 
      [value]="data.value" 
      name="sex" [(ngModel)]="user.sex">{{data.value}} 
    </li> 
</ul> 
    `, 
}) 
export class App { 

    constructor() { 
    this.user = { 
     sex: 'One' 
    } 
    this.list= [{ 
     id: 1, 
     value: 'One', 
     checked: true 
    }, 
     { 
     id: 2, 
     value: 'Two' 
     }]; 
    } 

} 

Answer 2

Ich denke, was Sie brauchen, um ein Feld in der Komponente zu erstellen, ist der ausgewählte Wert der Optionsfeldgruppe zu halten und eine Zweiweg-Bindung an diesen Wert hinzuzufügen:

<ul> 
    <li *ngFor="let data of list"> 
     <input type="radio" 
       [value]="data.value" 
       name="sex" [(ngModel)]="selectedValue" /> 
    </li> 
</ul> 

{{selectedValue}} 


export class App { 
selectedValue:string; 
list= [{ 
     id: 1, 
     value: 'One' 
    }, 
     { 
     id: 2, 
     value: 'Two' 
     }]; 
}