web-dev-qa-db-ja.com

Ionic 2：選択値が変更されたときにメソッドを呼び出す方法

Ionic 2を初めて使用し、Ionic 2のドキュメントを読んで、このコードが機能すると思いました。変更時に現在の選択値を返し、コンソールに出力することになっています。

page.html

<ion-select #C ionChange="onChange(C.value)"> 
                    <ion-option value="a">A</ion-option>
                    <ion-option value="b">B</ion-option>
</ion-select>

page.ts

public CValue:String;
onChange(CValue) {
     console.log(CValue);
}

ただし、コンソールはこれに関連するものを何も提供しません。バインディング内の何かを見逃しましたか？

angulartypescriptionic-frameworkionic2ionic3
16
CMA

の代わりに

<ion-select #C ionChange="onChange(C.value)"> 
  ...
</ion-select>

ionChangeはイベントであり（単純な属性ではないため）、次のようにする必要があります。

<ion-select #C (ionChange)="onChange(C.value)">
  ...
</ion-select>
36
sebaferreras

このようにする代わりに

<ion-select #C (ionChange)="onChange(C.value)">
  ...
</ion-select>

「$ event」を渡して値を取得することもできます

<ion-select #C (ionChange)="onChange($event)">
  ...
</ion-select>
2
vijay mishra

Ionic 4の場合

<ion-select [(ngModel)]="c.value" (ngModelChange)="myFun(c.value)">
...
</ion-select>
0
Anuj TBE

ドキュメントごとにIonic 4でionChangeを使用します

<ion-select formControlName="item" (ionChange)="saveSettings()"><ion-select>

emitEvent: falseプロパティをパッチのオプションに含めて、データの初期設定がionChangeイベントをトリガーしないようにしてください。

this.settingsForm.patchValue(data, {emitEvent: false, onlySelf: true})

このEDITを書いている時点では、オプションにパッチを適用すると起動するように見えるのはイオン選択だけであるため、初期化時に2倍の節約になります。これを停止するには、保存関数が初期化が完了したかどうかを示すために検索するブール値をグローバルに設定します。覚えておいてください、あなたは必要な場所に沿ってIonicを助けることができます！フレームワークはすべてを行うのではなく、助けるためにそこにあります！：Dすなわち：

await this.settings$.subscribe(async data => {
  if(this.initialLoading == 0) {
    console.log('Subscription data initialising...');
    await this.settingsForm.patchValue(data, {
      onlySelf:true,
      emitEvent:false
    });
    this.initialLoading = 1;
  } else {
    console.log('Settings were altered.');
  }
});

async saveSettings() {
  if(this.initialLoading == 1) {
    // your code
  }
}
0
Grant