Angular2 复选框 ng 模型未更新

Question

我正在用 Angular 2.0 尝试一件简单的事情我想要将模型绑定到"输入复选框"，使用方法注册"更改"，在复选框状态更改时执行该方法并根据模型的状态进行操作。一切正常，但是，当执行与更改事件链接的方法时，模型的状态与我的预期相反，即选中复选框时为 false，未选中复选框时为 true。这是代码片段;

<input value={{object.name}} type="checkbox" [(ng-model)]="object.selected" (change)="onChange(object.selected)">

知道我做错了什么吗？

Answer 1

从 angular2.beta8 开始，这个简单的技巧就可以了

<input type="checkbox" [(ngModel)]="object.selected" />

---

从 Angular 4 开始，必须添加 name 属性才能绑定。

<input type="checkbox" [(ngModel)]="object.selected" name="element_name"/>

Answer 2

一种无需ngModel的方法

<input
    id="{{fieldId}}"
    type="checkbox"
    [checked]="displayValue"
    (click)="setDisplayValue($event.target.checked)"
>

displayValue 将是 getter/settersetDisplayValue(( 方法将更新记录，因此 displayValue 将被更新

Answer 3

对我来说

只有在我使用(ngModelChange)时才有效：

<input type="checkbox" 
       [(ngModel)]="object.selected" 
       (ngModelChange)="onChange(object.selected)">

如果我使用(change)或(click)状态总是与我的预期相反，正如你所说

Answer 4

我像这样实现它： <input #angularcb type="checkbox" (change)="angular = angularcb.checked" />

您还可以在此处查看更多详细信息和现场演示：http://www.syntaxsuccess.com/viewarticle/input-controls-in-angular-2.0http://www.syntaxsuccess.com/angular-2-samples/#/demo/input

Answer 5

<input type="checkbox" [ngModel]="object.selected == 'Y'" (ngModelChange)="object.selected=$event?'Y':'N'"> 

Answer 6

您也可以尝试检查事件对象，然后提取选中的参数

<input value={{object.name}} type="checkbox" [(ng-model)]="object.selected" (change)="onChange($event)">

 onChange(event) {
  var isChecked = event.currentTarget.checked;
 }

• 似乎在模型有机会更新之前触发了事件。它目前适用于我的选择元素。

Answer 7

试试这个

应用.html

 <span *ngFor="#ca of classArray; #i=index">                                         
   <input type="checkbox"  id="{{ca.id}}" #cv [checked]=false                                       
    (change)="onChange(ca.id,cv.checked)">
         {{ca.class_name}},{{cv.checked}} <br>
 </span>

应用程序

 onChange(classId,flag){
        console.log(classId+" : "+flag);
   }

Answer 8

试试这样。

<input type="checkbox" [checked]="object.completed" (change)="object.completed = !objected.completed" >

Answer 9

不要忘记包含名称，否则复选框将不会更新，并且您将在控制台上收到错误。

<label>Sign on<input type="checkbox" name='showLogin2' [(ngModel)]="model.ShowLogin" ></label>

Answer 10

Angular 2.x.x 稳定版 ：知道复选框是否选中的简单方法：

<input type="checkbox" #checkbox (change)="check(checkbox.checked)">

TS：

export class component{
  constructor() {}
  check(checked){
    if(checked){
      // checked
    }else{
      // not checked
    }
  }

Answer 11

只需写输入类型的签入标签：

<input type="checkbox" name="abc" checked />

Answer 12

<input type="checkbox" [(ngModel)]="object.selected" />
<div>{{object | json}}</div>

Answer 13

输入

<input type="checkbox" (change)="selectionChange($event.srcElement)">

变更事件

selectionChange(input: HTMLInputElement) {
    input.checked === true
      ? doSomethingIfTrue()
      : doSomethingIfFalse();
}

Answer 14

<input value={{object.name}} type="checkbox" [(ngModel)]="object.selected" (change)="onChange(object.selected)" [ngModelOptions]="{standalone: true}">

表单只是一组键/值对。Name 是用于标识/获取/设置此控件的值的键，因此需要指定每个控件的名称。当你设置ngModelOptions="{standalone： true}"时，你告诉angular不要在表单中包含这个输入。这就是您的表单始终有效的原因。它实际上是空的。

https://angular.io/api/forms/NgModel#options