web-dev-qa-db-ja.com

Ionic2イオントグルでionChangeの値を取得

ここにこのトグルがあります：

<ion-toggle (ionChange)="notify(value)"></ion-toggle>

これをクリックすると、メソッドnotifyを呼び出して、パラメーターごとにトグル値を渡します。トグル値を取得するにはどうすればよいですか？

ありがとうございました！

angulartypescriptionic-frameworkionic2ionic3
11
bbcbreno

Ionic2 Docs-Toggle で見ることができるように、それを行うためのより良い方法は、を使用してコンポーネントからトグルをプロパティにバインドすることですngModel。

コンポーネントコード：

_public isToggled: boolean;

// ...

constructor(...) {
  this.isToggled = false;
}

public notify() {
  console.log("Toggled: "+ this.isToggled); 
}
_

表示：

_<ion-toggle [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle>
_

この方法では、値は既にコンポーネントのプロパティであり、_this.isToggled_を使用して常に値を取得できるため、値を送信する必要はありません。

[〜＃〜] update [〜＃〜]

@ GFoley8と同じように、彼のコメントで言及されています：

IonChangeがngModelに直接バインドされている場合は、十分に注意してください。 ngModelにバインドされた値が変更されたときに、誰かがトグルをクリックすることによるビューから、またはコードを介したコンポーネント内で、通知メソッドが呼び出されます。新しいGET呼び出しを行うとき。最近、トグルをクリックするとPATCHがトリガーされるという問題がありました。これは、トグルにバインドされたデータが変更されると、他のすべてのクライアントが自動的にPATCHをトリガーすることを意味します.

これを回避するために<ion-toggle [ngModel]="isToggled" (ngModelChange)="notifyAndUpdateIsToggled()"></ion-toggle>を使用しました

32
sebaferreras

$event in ionChange。

表示：

<ion-toggle (ionChange)="notify($event)"></ion-toggle>

コントローラ：

notify(event) {
   console.log(event.checked);   
}
14
Jaydeep Kataria

チェックには2つの方法があります。

1つ目は、@ Chathuranga Silvaが提案したようなものです

html

<ion-toggle (ionChange)="notify($event)"></ion-toggle>

ts

notify(event: any) { console.log("toggled: "+event.target.checked); }

2番目は次のようなものです。

html

<ion-toggle (ionChange)="notify()" [checked]="isToggled"></ion-toggle>

ts

_var isToggled: boolean = true;

notify() {
  console.log("toggled: "+ this.isToggled); 
}
_

どちらを選ぶかはあなた次第です。コンストラクタ/ onInitでトグルを操作しやすく、notify()メソッドの外でこの値を使用する方が簡単になるため、2番目の方法をお勧めします。

2
Ivar Reukers