选择值更改时调用方法 Ionic 3答案

【问题标题】：Call a method when select value is changed Ionic 3选择值更改时调用方法 Ionic 3
【发布时间】：2018-10-01 05:08:10
【问题描述】：

HTML

    <ion-select interface="popover" [(ngModel)]="selectV">
      <ion-option *ngFor="let human of humans" [value]="v.id">{{v.name}}</ion-option>
      <ion-option onChange="openModal()">GO TO THE MODAL</ion-option>
    </ion-select>
  </ion-item>

这是方法

  openModal() {
    console.log('working')
    this.modalCtrl.create(MyModal).present();
  }

我希望只要我选择“转到模式”，它就会调用将打开模式页面的方法。

【问题讨论】：

标签： angular ionic3

【解决方案1】：

你可以收听ionChange事件：

<ion-select #MySelect ionChange="onChange(MySelect.value)"> 
   <ion-option *ngFor="let human of humans" [value]="v.id">{{v.name}}</ion-option>
   <ion-option value="goToModal">GO TO THE MODAL</ion-option>
</ion-select>

并在选定的值是正确的一个：

时打开模态

onChange(value) {
  if (value ==='goToModal') {
    this.openModal();
  };
}

【讨论】：

【解决方案2】：

您可以将[(ngModel)] 拆分为[ngModel] 和(ngModelChange)。

component.ts

class Component {
  selectV: any;

  onChange(value: any) {
    this.selectV = value;
    if (value === 'openModal') {
      this.openModal()
    }
  }
}

component.html

<ion-select interface="popover" [ngModel]="selectV" (ngModelChange)="onChange($event)>
  <ion-option *ngFor=" let human of humans " [value]="v.id ">{{v.name}}</ion-option>
  <ion-option [value]='openModal'">GO TO THE MODAL</ion-option>
</ion-select>

【讨论】：

有一个错误，如果我选择“转到”模式，我会无限打开/关闭。
无限打开/关闭模态：/ .