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