angular2 复选框 ng-model 未更新答案

【问题标题】：angular2 checkbox ng-model not updatedangular2 复选框 ng-model 未更新
【发布时间】：2016-03-26 13:54:09
【问题描述】：

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

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

知道我做错了什么吗？

【问题讨论】：

关于stackoverflow的第一个问题。无法粘贴 html sn-p。
无论如何你都可以粘贴一些原始代码
粘贴代码然后选择并点击代码图标
"''"
谢谢，现在代码在questios中可见

标签： angular checkbox

【解决方案1】：

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

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

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

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

【讨论】：

要与 Angular4 一起使用，我必须在输入字段中添加“name”属性。

【解决方案2】：

一种无需 ngModel

的方法

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

从 Angular2 RC.4 开始测试。完美运行。
似乎 change 事件在 DOM 中发生更改时触发，而 ngModelChange 在对象属性更改时触发。所以当在 change 事件上读取对象属性时，它还没有被更新为 DOM 的值。

【解决方案4】：

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

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

【讨论】：

如果我们必须使用*ngFor 生成复选框怎么办？

【解决方案5】：

&lt;input type="checkbox" [ngModel]="object.selected == 'Y'" (ngModelChange)="object.selected=$event?'Y':'N'"&gt;

【讨论】：

一些解释可以帮助其他人更好地理解解决方案。
感谢您的帮助。也许我可以解释一下。 [NgModel] 有一个带有比较值的单向绑定，只是为了使复选框显示为选中或未选中。在 (NgModelChange) 中，您在模型上设置值。

【解决方案6】：

您也可以尝试检查事件对象并拉出选中的参数

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


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

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

【讨论】：

我注意到该事件也在模型更新之前被触发。
仅供参考scotch.io/tutorials/…

【解决方案7】：

试试这个

app.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>

app.ts

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

【讨论】：

【解决方案8】：

像这样试试。

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

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

【讨论】：

使用 (change)="check($event)" 会更健壮，然后 check() 方法可以访问所检查的属性以及所有其他属性 - 加上你没有不需要实现#spy。

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

输入

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

更改事件

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

【讨论】：

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

【讨论】：