在 Angular2 中选中复选框时启动事件 [英] Launch an event when checking a checkbox in Angular2

问题描述

我是 Angular2 和全球网络的新手，我想启动一个操作，在选中 checkbox 和或使用 Material- 取消选中它时更改数据库中的对象参数值-设计，我尝试了 [(ngModel)] 但什么也没发生.这个想法是我必须添加一些带有 checked | 的命题.unchecked 状态来判断它是 true 还是 false 命题.这是命题模型

导出类 PropositionModel {id:字符串；措辞P:字符串；//命题propStatus:布尔值；//命题状态}

这里是命题的 Html 代码:

<div (submit)="addProp1()";class=uk-input-group"><span class="uk-input-group-addon"><input type="checkbox"数据-md-icheck/></span><label>命题1</label><输入[(ngModel)]=proposition1.wordingP";类型=文本"类=md-输入"required class =md-input"/>

这是添加命题的 TypeScript 代码:

addProp1() {this.proposition1 = new PropositionModel();this.proposition1.propStatus = false;this.propositionService.addProposition(this.proposition1).订阅(响应=> {控制台日志(响应)；控制台日志(this.proposition1)；this.proposition1 = new PropositionModel();})}

正如你所看到的，我将 proposition status 默认设置为 false，一旦我检查了这个命题，我想更改它.这是如何寻找更好的问题理解的图像.

有什么帮助吗?

解决方案

StackBlitz

模板: 您可以使用本机 change 事件或 NgModel 指令的 ngModelChange.

或

TS:

onNativeChange(e) {//这里 e 是一个原生事件如果(e.target.checked){//在这里做点什么}}onNgModelChange(e) {//这里 e 是一个布尔值，如果选中则为 true，否则为 false如果(e){//在这里做点什么}}

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 checkbox and 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 | unchecked status to tell if it is a true or false proposition. Here is the proposition model

export class PropositionModel {
    id:string;
    wordingP:string; // the proposition
    propStatus:Boolean; // the proposition status
}

here is the Html code for a proposition :

<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:

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 false by default for the proposition status and I want to change it once i checked the proposition. Here is an image how it looks for a better issue understanding.

Any help Please ?

解决方案

StackBlitz

Template: You can either use the native change event or NgModel directive's ngModelChange.

<input type="checkbox" (change)="onNativeChange($event)"/>

or

<input type="checkbox" ngModel (ngModelChange)="onNgModelChange($event)"/>

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
  }
}

这篇关于在 Angular2 中选中复选框时启动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！