Angular2中如何在勾选复选框时触发事件

Question

我是Angular2和Web方面的新手，我想在使用Material-Design时启动一个操作，当勾选或取消勾选checkbox时，可以更改数据库中对象参数的值。我尝试使用[(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();})
    }

如您所见，我默认将 proposition status 设置为 false，我想在选中主张后更改它。以下是一张图片以更好地理解该问题。

可以帮忙吗？

- SeleM

Answer 1

模板: 你可以使用原生的change事件或NgModel指令的ngModelChange。

StackBlitz

<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

---

请注意，应该是(change)而不是(onChange)。这是我的愚蠢错误，花了我几分钟才弄清楚。 - Sacky San

Answer 2

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

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

- Jakob Lithner

Answer 3

您可以像这样使用ngModel：

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

在您的代码中更新属性checkboxValue以更新复选框状态，当用户更改复选框时调用addProp()。

- Günter Zöchbauer

---

没有起作用，抱歉，请问您能根据上面的代码再解释详细一些吗？我会非常感激。 - SeleM

[ngModel]="checkboxValue" 添加了 ngModel 指令和默认的 ControlValueAccessor（并将 checkboxValue 的值绑定到复选框）。使用 ngModel 我们可以绑定到 ngModelChange 事件，该事件在每次复选框更改时发出。 - Günter Zöchbauer

你使用的是哪个Angular 2版本？在Firefox和IE中绑定某些输入元素存在问题，但最近已经修复了。 - Günter Zöchbauer

这是Beta 0版本，我没有尝试更新它。问题在于 ngModel 没有考虑我的更改.. - SeleM

你需要至少beta.16 AFAIR。 - Günter Zöchbauer

Answer 4

检查演示: https://stackblitz.com/edit/angular-6-checkbox?embed=1&file=src/app/app.component.html

（此内容为关于一个 Angular 6 复选框演示的链接，可供参考）

  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>

- Vijay Chauhan