Angular2 флажок ng-model не обновлен - программирование

Я пробую простую вещь с Angular 2.0 Я хочу привязать модель к флажку ввода, зарегистрировать "изменение" с помощью метода, выполнить метод, когда состояние флажка изменяется и действует в зависимости от состояния модели. Все работает, но когда метод, связанный с событием изменения, выполняется, состояние модели противоположно тому, что я ожидаю, т.е. Является ложным при выборе флажка, является истинным, когда флажок не выбран. Вот фрагмент кода;

Ответы

Ответ 1

Как и в случае с angular2.8, этот простой трюк будет делать

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

Ответ 2

Способ сделать это без ngModel

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

displayValue будет получателем/установщиком setDisplayValue() будет обновлять запись, и, следовательно, displayValue будет обновляться

Ответ 3

Для меня работает только, когда я использовал (ngModelChange):

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

Если я использую (change) или (click), состояние всегда противоречит ожидаемому, как вы сказали

Ответ 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

Ответ 5

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

Ответ 6

Вы также можете попробовать и проверить объект события и просто вытащить проверенный параметр

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


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

похоже, что событие запускается до того, как модель получит возможность обновить. В настоящее время он отлично работает для моих элементов выбора.

Ответ 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

Angular 2.x.x stable: проверен флажок флажок флажок:

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

export class component{
  constructor() {}

  check(checked){

    if(checked){
      // checked
    }else{
      // not checked
    }
  }

Ответ 10

Не забудьте указать имя, или флажок не будет обновлен, и вы получите сообщение об ошибке на консоли.

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

Ответ 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();
}