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

【问题标题】：Launch an event when checking a checkbox in Angular2在 Angular2 中选中复选框时启动事件
【发布时间】：2016-09-01 20:11:54
【问题描述】：

我是 Angular2 和全球 web 的新手，我想在检查 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，一旦我检查了提议，我想更改它。这是一个图像如何寻找更好的问题理解。

有什么帮助吗？

【问题讨论】：

标签： html checkbox data-binding typescript angular

【解决方案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
  }
}

【讨论】：

请注意，它是 (change) 而不是 (onChange)。这是我的愚蠢错误，我花了几分钟才弄明白

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你可以用ngModel点赞

<input type="checkbox" [ngModel]="checkboxValue" (ngModelChange)="addProp($event)" data-md-icheck/>

通过更新代码中的属性checkboxValue 来更新复选框状态，并在用户更改复选框时调用addProp()。

【讨论】：

没有用，对不起，你能根据上面的代码澄清更多吗？我会很感激的..
[ngModel]="checkboxValue" 添加ngModel 指令和默认ControlValueAccessor（并将checkboxValue 的值绑定到复选框）。使用ngModel，我们可以绑定到每次复选框更改时发出的ngModelChange 事件。
您使用的是什么 Angular"'2 版本。绑定到 FF 和 IE 中的某些输入元素时存在问题，但最近已修复。
它是 Beta 0，我没有尝试更新它，问题是 ngModel 没有考虑我的更改..
你至少需要 beta.16 AFAIR

【解决方案4】：

查看演示：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>

【讨论】：