Html 在 Angular2 中选中复选框时启动事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37077707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Launch an event when checking a checkbox in Angular2
提问by selem mn
I'm newbie in Angular2 and in web globally , I want to launch an action that changes an oject paramater value in the Database when checking a checkboxand or unchecking it using Material-Design, I tried with [(ngModel)]but nothing happened. the idea is that i have to add some propositions with checked | uncheckedstatus to tell if it is a trueor falseproposition. Here is the proposition model
我是 Angular2 和 web 全局的新手，我想启动一个操作，在检查 acheckbox和或取消选中它时更改数据库中的对象参数值Material-Design，我尝试过[(ngModel)]但没有任何反应。这个想法是我必须添加一些带有checked | unchecked状态的命题来判断它是一个true还是false命题。这是命题模型
export class PropositionModel {
id:string;
wordingP:string; // the proposition
propStatus:Boolean; // the proposition status
}
here is the Html code for a proposition :
这是命题的 Html 代码：
<div class="uk-width-xlarge-1-1 uk-width-medium-1-2">
<div (submit)="addProp1()" class="uk-input-group">
<span class="uk-input-group-addon"><input type="checkbox" data-md-icheck/></span>
<label>Proposition 1</label>
<input [(ngModel)]="proposition1.wordingP" type="text" class="md-input" required class="md-input"/>
</div>
</div>
here is the TypeScript code for adding the proposition:
这是用于添加命题的 TypeScript 代码：
addProp1() {
this.proposition1 = new PropositionModel();
this.proposition1.propStatus = false;
this.propositionService.addProposition(this.proposition1)
.subscribe(response=> {
console.log(response);
console.log(this.proposition1);
this.proposition1 = new PropositionModel();})
}
And as you can see i made it a falseby default for the proposition statusand I want to change it once i checked the proposition.
Here is an image how it looks for a better issue understanding.
正如您所看到的，我将其设为false默认值，proposition status一旦我检查了该提议，我就想更改它。这是如何寻找更好的问题理解的图像。
Any help Please ?
有什么帮助吗？
回答by Ankit Singh
Template:You can either use the native changeevent or NgModel directive's ngModelChange.
模板：您可以使用本机change事件或 NgModel 指令的ngModelChange.
<input type="checkbox" (change)="onNativeChange($event)"/>
or
或者
<input type="checkbox" ngModel (ngModelChange)="onNgModelChange($event)"/>
TS:
TS：
onNativeChange(e) { // here e is a native event
if(e.target.checked){
// do something here
}
}
onNgModelChange(e) { // here e is a boolean, true if checked, otherwise false
if(e){
// do something here
}
}
回答by Jakob Lithner
If you add double paranthesis to the ngModel reference you get a two-way binding to your model property. That property can then be read and used in the event handler. In my view that is the most clean approach.
如果您向 ngModel 引用添加双括号，您将获得与模型属性的双向绑定。然后可以在事件处理程序中读取和使用该属性。在我看来，这是最干净的方法。
<input type="checkbox" [(ngModel)]="myModel.property" (ngModelChange)="processChange()" />
回答by Günter Z?chbauer
You can use ngModellike
你可以使用ngModel像
<input type="checkbox" [ngModel]="checkboxValue" (ngModelChange)="addProp($event)" data-md-icheck/>
To update the checkbox state by updating the property checkboxValuein your code and when the checkbox is changed by the user addProp()is called.
通过更新checkboxValue代码中的属性来更新复选框状态，并在用户更改复选框时addProp()调用。
回答by Vijay Chauhan
Check Demo: https://stackblitz.com/edit/angular-6-checkbox?embed=1&file=src/app/app.component.html
检查演示：https: //stackblitz.com/edit/angular-6-checkbox?embed=1&file=src/ app/ app.component.html
CheckBox: use change event to call the function and pass the event.
<label class="container">
<input type="checkbox" [(ngModel)]="theCheckbox" data-md-icheck
(change)="toggleVisibility($event)"/>
Checkbox is <span *ngIf="marked">checked</span><span
*ngIf="!marked">unchecked</span>
<span class="checkmark"></span>
</label>
<div>And <b>ngModel</b> also works, it's value is <b>{{theCheckbox}}</b></div>
