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

Question

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

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

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

在编写此 EDIT 时 - 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
}