angular2双向无线电按钮

问题描述：

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>

，但它不工作，我想动态更新检查变量单选按钮被点击

不能使用无线电按钮像复选框。您必须为每个输入声明一个值并使用其他变量来处理选定的值。 – Polochon

@Polochon它的工作，但有没有办法让其他人检查属性为false，因为如果我这样做，它使所有字段我按真正 – kohli

答

您需要添加值时：

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

}

它不工作 – kohli

我的代码工作。 – 2016-11-15 15:49:29

答

我想你需要什么，在组件来创建一个字段来保存单选按钮组的设定值，并添加一个双向绑定到值：

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

angular2双向无线电按钮

相关推荐