angular2雙向無線電按鈕

Question

結合我創建了一個數組這樣

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

，我試圖做雙向綁定這樣

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

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

，但它不工作，我想動態更新檢查變量單選按鈕被點擊

Answer 1

您需要添加值時：

@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

我想你需要什麼，在組件來創建一個字段來保存單選按鈕組的設定值，並添加一個雙向綁定到值：

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