web-dev-qa-db-ja.com

angular2チェックボックスng-modelが更新されていません

Angular 2.0を使用して簡単なことを試みています。モデルを「入力チェックボックス」にバインドし、「変更」をメソッドに登録し、チェックボックスの状態が変更されたときにメソッドを実行し、モデルの状態。すべてが機能しますが、変更イベントにリンクされたメソッドが実行されると、モデルの状態は予想とは逆になります。つまり、チェックボックスが選択されている場合はfalse、チェックボックスが選択されていない場合はtrueです。コードスニペットは次のとおりです。

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

私が間違っていることについてのアイデアはありますか？

angularcheckbox
36
Picci

Angular2.beta8の時点で、この簡単なトリックは

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

Angular 4から、バインドするname属性を追加する必要があります。

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

ngModelなしでそれを行う方法

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

displayValueはgetter/setterになりますsetDisplayValue（）メソッドはレコードを更新するため、displayValueは更新されます

25
Nugu

私にとっては、(ngModelChange)を使用した場合にのみ機能します：

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

(change)または(click)を使用すると、状態は常にあなたが言ったように私が期待するものに反します

15
Kayo Lima

次のように実装しました：<input #angularcb type="checkbox" (change)="angular = angularcb.checked" />

また、ここで詳細とライブデモを見ることができます。 http://www.syntaxsuccess.com/viewarticle/input-controls-in-angular-2.http：// www。 syntaxsuccess.com/angular-2-samples/#/demo/input

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

これを試してください

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);
   }
4
Mubashir

また、イベントオブジェクトを試して検査し、チェックされたパラメーターを引き出すこともできます。

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


 onChange(event) {
  var isChecked = event.currentTarget.checked;
 }
  • モデルが更新の機会を得る前にイベントが発生しているようです。現在、私の選択した要素に対してはうまく機能しています。
4
MANNY_THE_GREAT

このようにしてみてください。

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

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
Bougarfaoui El houcine

名前を含めることを忘れないでください。そうしないと、チェックボックスが更新されず、コンソールにエラーが表示されます。

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

入力タイプのタグにチェックインするだけです：

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

入力

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

イベントの変更

selectionChange(input: HTMLInputElement) {
    input.checked === true
      ? doSomethingIfTrue()
      : doSomethingIfFalse();
}
0
Dblock247
<input type="checkbox" [(ngModel)]="object.selected" />
<div>{{object | json}}</div>
0
Shiraj Momin