Javascript Angular2:单选按钮更改事件不具有约束力

在这里，我想简单地将RadioButton与change事件绑定。不使用任何库

下面的工作很好

<input type="radio" name="test" value="A" (change)="onPropertyChange('test')">
<input type="radio" name="test" value="B" (change)="onPropertyChange('test')">

但这不是：

<div class="btn-group col-lg-2" data-toggle="buttons" >
<label *ngFor=" let app of applications; let i = index; " 
       class="btn btn-default " [ngClass]="{'active':( ticket.app == app)}">      
      <input type="radio" id="app{{i}}"  name="app" value="{{i}}"                   
           checked="{{ ( ticket.app == app ) ? 'checked' : ''}}" (change)=" 
           onPropertyChange('app')"  > 
     {{app}}
</label>
</div>

{{app}}

将更改事件绑定到标签时，它给了我旧的值

有人能建议正确的方法吗？

使用ng2引导

<div class="btn-group col-lg-2">
    <label *ngFor="let app of applications" class="btn btn-default" [(ngModel)]="ticket.app" btnRadio="{{app}}">{{app}}</label>
</div>

{{app}}

在.ts文件中

• 添加了从“ng2引导/组件/按钮”导入{ButtonRadioDirective}的

• 在

  @Component

  注释中，将其作为

  指令传递：[ButtonRadioDirective]

---

它很好用。希望它能为您工作。

使用Angular 2 RC2，不再需要创建RadioButtonState：

单选按钮现在可以共享FormControl实例

---

来源：

没有库的双向绑定：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default" [class.active]="yourVariable==item" (click)="yourVariable=item" *ngFor="let item of items">
        <input type="radio" style="display: none;" name="radios" [(ngModel)]="yourVariable" [value]="item" [checked]="yourVariable==item" />
        {{yourLabelText}}
    </label>
</div>

{{yourLabelText}

处理Angular时，不应依赖引导javascript。您的问题是

data toggle=“buttons”

add-onPropertyChange函数ts code只有在选中收音机时才会触发

change

事件。在本例中，您硬编码了传递给函数的值

onPropertyChange（'app'）

。您可能想将其更改为

onPropertyChange（i）

感谢@yurzui建议正确的方法。非常有用。

class MyComp {
   food = 'fish';
}

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default" [class.active]="yourVariable==item" (click)="yourVariable=item" *ngFor="let item of items">
        <input type="radio" style="display: none;" name="radios" [(ngModel)]="yourVariable" [value]="item" [checked]="yourVariable==item" />
        {{yourLabelText}}
    </label>
</div>