Ionic 2：select 值更改时如何调用方法

Question

我是 Ionic 2 的新手，我阅读了 Ionic 2 文档并认为这段代码可以工作。它应该在更改时返回当前的 select 值并将其打印到控制台。

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

但是控制台没有给出任何与此相关的信息。我是不是在绑定中遗漏了什么？

Answer 1

而不是

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

因为 ionChange 是一个事件（而不是一个简单的属性），你需要这样做：

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

Answer 2

而不是这样做

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

你也可以通过"$event"获取值

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

Answer 3

对于 Ionic 4 使用

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

Answer 4

根据文档

在Ionic 4中使用ionChange

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

确保将 emitEvent: false 属性包含在修补选项中，以阻止初始数据填充触发 ionChange 事件。

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

在撰写此编辑时 - ion-select 似乎是唯一在修补选项时触发的元素，因此您最终可以在初始化时进行双倍的保存。通过全局设置一个布尔值来停止此操作，您的保存功能将查找该布尔值以表示初始化是否已完成。请记住，您可以在需要的地方帮助 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
  }
}

Answer 5

在您的模板中

<ion-label>Priority</ion-label>
   <ion-select placeholder="Select"  [(ngModel)]="pvalue" (ionChange)="getValue()">
    <ion-option value="a">A</ion-option>
    <ion-option value="b">B</ion-option>
 </ion-select>

在您的 Component.ts 文件中

pvalue:any;
getValue(){
console.log(this.pvalue);
// the value will be displayed
}

Ionic 2：select 值更改时如何调用方法

Ionic 2: How to call a method when select value is changed

typescript

ionic-framework

ionic2

ionic3

angular