在 Angular2 中选中复选框时启动事件

Question

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

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();})
    }

正如你所看到的，我将它 false 默认情况下为 proposition status 并且我想在检查提议后更改它。这是一个图像如何寻找更好的问题理解。

有什么帮助吗？

原文由 SeleM 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

StackBlitz

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

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

或者

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

原文由 Ankit Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您将双括号添加到 ngModel 引用，您将获得到模型属性的双向绑定。然后可以在事件处理程序中读取和使用该属性。在我看来，这是最干净的方法。

 <input type="checkbox" [(ngModel)]="myModel.property" (ngModelChange)="processChange()" />

原文由 Jakob Lithner 发布，翻译遵循 CC BY-SA 3.0 许可协议