[英]Angular2: RadioButton change event is not binding
Here, I want to simply bind RadioButton with change event. 在这里,我想简单地将RadioButton绑定到change事件。 Not using any library.
不使用任何库。
Following works fine. 以下工作正常。
<input type="radio" name="test" value="A" (change)="onPropertyChange('test')">
<input type="radio" name="test" value="B" (change)="onPropertyChange('test')">
But this one is not : 但这个不是:
<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>
While binding change event to label, it is giving me old value. 将更改事件绑定到标签时,它给了我旧的价值。
Can anyone suggest right approach? 谁能提出正确的方法?
Thanks in advance...!!! 提前致谢...!!!
With Angular 2 RC2 it's no longer needed to create the RadioButtonState: 使用Angular 2 RC2,不再需要创建RadioButtonState:
Radio Buttons can now share FormControl instance
Radio Buttons现在可以共享FormControl实例
<form #f="ngForm">
<input type="radio" name="food" [(ngModel)]="food" value="chicken">
<input type="radio" name="food" [(ngModel)]="food" value="fish">
</form>
And: 和:
class MyComp {
food = 'fish';
}
Source: 5thingsangular - Issue #8 来源: 5thingsangular - 问题#8
Using ng2-bootstrap, 使用ng2-bootstrap,
<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>
In .ts file, 在.ts文件中,
Added import { ButtonRadioDirective } from 'ng2-bootstrap/components/buttons';
import { ButtonRadioDirective } from 'ng2-bootstrap/components/buttons';
添加了import { ButtonRadioDirective } from 'ng2-bootstrap/components/buttons';
In @Component
annotation, passed it as directives: [ButtonRadioDirective]
. 在
@Component
注释中,将其作为directives: [ButtonRadioDirective]
传递directives: [ButtonRadioDirective]
。
It works fine. 它工作正常。 Hope it will work for you.
希望它能为你效劳。
Two way binding without a library: 没有库的双向绑定:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.