html5 – 检查Angular2中的复选框时启动一个事件

发布时间:2019-05-15 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html5 – 检查Angular2中的复选框时启动一个事件脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是Angular2的新手,也是全球网络中的新手,我想在检查复选框时修改数据库中的oject参数值,或者使用Material-Design取消选中它,我尝试使用[(ngModel)]但没有发生任何事情.我的想法是,我必须添加一些命题与检查|未经检查的状态,以判断它是真是假.这是命题模型
export class PropositionModel {
        id:string;
        wordingP:string; // the proposition
        propStatus:Boolean; // the proposition status
}

这是一个命题的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>

这是用于添加命题的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();})
    }

正如你可以看到我默认为命题状态使它成为假,我想在检查命题后改变它.
这是一个图像如何寻找更好的问题理解.

有什么帮助吗?

解决方法

PLUNKER DEMO

模板:使用change事件来调用函数并传递事件.

<input type="checkbox"  data-md-icheck (change)="addprop1($event)"/>

TS:在添加属性之前接收事件并检查是否选中了复选框.

addProp1(e) {

   if(e.target.checked){
        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();})
   }
}

总结

以上是脚本之家为你收集整理的html5 – 检查Angular2中的复选框时启动一个事件全部内容,希望文章能够帮你解决html5 – 检查Angular2中的复选框时启动一个事件所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: