angular2单向按钮的双向绑定

Question

I have created a array like this

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

and i tried to do Two way binding like this

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

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

but it doesn't work i want dynamically update the checked variable when radio button is clicked

Answer 1

You need to add value:

@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

I think what you need to is to create a field in the component to hold the selected value of the radio button group and add a two way binding to that value:

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