Question

我正在尝试使用Angular 2.0进行简单的操作我希望将模型绑定到“输入复选框”，使用方法注册“更改”，在复选框状态更改时执行方法，并根据模型的状态执行操作。一切正常但是，当执行与变更事件链接的方法时，模型的状态与我的预期相反，即当选中复选框时为假，当取消选中该复选框时为真。这是代码段;

<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 / setter setDisplayValue（）方法将更新记录，因此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.0 http://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

您也可以尝试检查事件对象，然后拉出已检查的参数

thread1.join();
thread2.join();
System.out.println("Threads completed");

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

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

Answer 8

试试这样。

settings_path

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" (change)="selectionChange($event.srcElement)">

更改活动

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

Answer 13

<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

angular2复选框ng-model未更新

13 个答案: