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

angular2双向绑定单选按钮

2 个答案: