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

在您的模板中

[
  {
      UserId: '1',
      Classes: [{
         Name: 'c1',
      },{
         Name: 'c2',
      },{
         Name: 'c3',
      },{
         Name: 'c4',
      }],          
  },
  {
      UserId: '2',
      Classes: [{
         Name: 'c2',
      },{
         Name: 'c7',
      }],          
  },
]

在你的 Component.ts 文件中

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

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

5 个答案: