angular2 deux voies de liaison pour le bouton radio

Question

J'ai créé un tableau comme celui-ci

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

et moi avons essayé de le faire à deux voies de liaison comme celui-ci

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

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

mais il ne fonctionne pas, je veux dynamiquement mettre à jour la variable vérifiée lorsque le bouton radio est cliqué

Answer 1

Vous devez ajouter de la valeur:

@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

Je pense que ce que vous devez est de créer un champ dans le composant pour maintenir la valeur sélectionnée du groupe de bouton radio et ajouter une deux voies de liaison à cette valeur:

<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' 
     }]; 
}