首页 文章

angular2复选框ng-model未更新

提问于
浏览 次
36

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

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

关于我做错了什么的任何想法？

angular checkbox

13 回答

  • 46

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

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

    从Angular 4开始，必须为此绑定 name 属性 .

    <input type="checkbox" [(ngModel)]="object.selected" name="element_name"/>
    回复于
  • 0

    没有 ngModel 的方法

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

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

    回复于
  • 0

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

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

    如果我使用 (change) 或 (click) ，状态总是违背我的预期，如你所说

    回复于
  • 9

    我已经像这样实现了它： <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

    回复于
  • 6
    <input type="checkbox" [ngModel]="object.selected == 'Y'" (ngModelChange)="object.selected=$event?'Y':'N'">
    回复于
  • 14

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

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


 onChange(event) {
  var isChecked = event.currentTarget.checked;
 }
    • 似乎在模型获得更新机会之前触发了事件 . 它目前适用于我的选择元素 .
    回复于
  • 4

    试试这个

    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);
   }
    回复于
  • 24

    试试这样吧 .

    <input type="checkbox" [checked]="object.completed" (change)="object.completed = !objected.completed" >
    回复于
  • 0

    不要忘记包含名称或复选框不会更新，您将在控制台上收到错误 .

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

    Angular 2.x.x stable ：是否选中了解复选框的简便方法：

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

    TS：

    export class component{
  constructor() {}

  check(checked){

    if(checked){
      // checked
    }else{
      // not checked
    }
  }
    回复于
  • 2

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

    <input type="checkbox" name="abc" checked />
    回复于
  • 3
    <input type="checkbox" [(ngModel)]="object.selected" />
<div>{{object | json}}</div>
    回复于
  • 2

    Input

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

    Change Event

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

相关问题