模型不会在Angular 2收音机列表中更新

我试图构建一个Angular 2组件，该组件显示带有收音机的选项列表。它可以正常工作，但是在[(ng-model)]="answer"中绑定的组件的answer字段在选择其中一个选项时不会更新。我做错了什么或者不是这样来创建无线电选择选项的列表？模型不会在Angular 2收音机列表中更新

<div> 
    Answer: {{ answer }} 
    </div> 
    <div class="radio" *ng-for="#option of itemData"> 
     <label> 
      <input type="radio" [value]="option.id" [(ng-model)]="answer" 
       (change)="responseChanged()" name="radio-list"> 
      <span>{{ option.name }}</span> 
     </label> 
    </div>

Plunker

来源

2015-10-27 lucassp

这里的[自定义实现（https://github.com/barbatus/ng2-pipes/blob/master/client/lib/radio_value_accessor.ts ）收音机，虽然不知道名单。 –

嗯，我想双向绑定是现在无线工作，所以目前不能使用[(ng-model)]。

另一种方法是使用更改事件和检查属性。见我plunker

http://plnkr.co/edit/7Zm3qgoSv22Y9KrBn4tS?p=preview

(change)="answer=$event.target.value"

和

[checked]='answer==option.id'

来源

2015-10-27 14:16:29 Chandermani

我也假设这也是:)我不知道是否有一种方法来使用组件内的Control类来构建这种无线电列表。 – lucassp

好吧，它看起来还有其他与属性绑定到视图相关的问题：'setAnswer（e）{this.items [e.index] .answer = e.answer; // e.answer =“b” console.log（this.items [e.index]）;对象的“答案”字段未定义 } – lucassp

OK，属性绑定，[[item-data] ='item''，向组件树发送引用，并将'answer'设置为一个由[（ng-model）]形成的空字符串，这就是顶级组件的setAnswer处理程序在上面一行中更新后显示答案字段为undefined的原因。 – lucassp

在angular1不能使用NG-模型与无线电盒等。然而，github上有几个组件可以让你轻松完成，比如ng2-radio-group组件。它有两个收音机支持选择和多个复选框选择：

<radio-group [(ngModel)]="sortBy"> 
    <input type="radio" value="rating"> Rating<br/> 
    <input type="radio" value="date"> Date<br/> 
    <input type="radio" value="watches"> Watch count<br/> 
    <input type="radio" value="comments"> Comment count<br/> 
</radio-group> 


<checkbox-group [(ngModel)]="orderBy"> 
    <input type="checkbox" value="rating"> Rating<br/> 
    <input type="checkbox" value="date"> Date<br/> 
    <input type="checkbox" value="watches"> Watch count<br/> 
    <input type="checkbox" value="comments"> Comment count<br/> 
</checkbox-group>

来源

2016-03-08 08:42:55 pleerock

模型不会在Angular 2收音机列表中更新

回答

相关问题