Ionic中ion-select选中选项时即时更新ngModel的问题求助

看起来你遇到的是Ionic ion-select 默认行为的问题——默认的alert样式选择器需要用户点击「确定」按钮才会更新绑定的ngModel并触发ionChange事件。要实现选中选项就立即更新模型，有两种简单的方案：

方案一：切换选择器的交互样式 #

如果不需要alert弹窗的确认步骤，可以把ion-select的interface属性改成action-sheet或者popover：

<ion-select (ionChange)="loginProviderChanged($event)" [(ngModel)]="provider" 
            name="provider" placeholder="Select Type" interface="action-sheet">
  <ion-select-option value="StripeConnect">StripeConnect</ion-select-option>
  <ion-select-option value="Google">Google</ion-select-option>
</ion-select>

这种方式下，用户点击任意选项后，选择器会自动关闭，同时立刻更新provider的值并触发ionChange事件，完全不需要额外的确认操作。

方案二：给选项绑定ionSelect事件（保留alert样式） #

如果必须保留alert弹窗的样式，那可以给每个ion-select-option绑定ionSelect事件，在用户选中选项时直接更新模型：

<ion-select [(ngModel)]="provider" name="provider" placeholder="Select Type">
  <ion-select-option value="StripeConnect" (ionSelect)="provider = 'StripeConnect'">
    StripeConnect
  </ion-select-option>
  <ion-select-option value="Google" (ionSelect)="provider = 'Google'">
    Google
  </ion-select-option>
</ion-select>

或者你也可以封装成一个通用方法，避免重复代码：

updateProvider(value: string) {
  this.provider = value;
  // 这里还可以添加你原本在loginProviderChanged里的逻辑
}

<ion-select [(ngModel)]="provider" name="provider" placeholder="Select Type">
  <ion-select-option value="StripeConnect" (ionSelect)="updateProvider('StripeConnect')">
    StripeConnect
  </ion-select-option>
  <ion-select-option value="Google" (ionSelect)="updateProvider('Google')">
    Google
  </ion-select-option>
</ion-select>

这样用户在alert弹窗里选中选项的瞬间，provider的值就会被更新，不需要点击确定按钮。

至于你之前绑定的ionChange没触发，是因为这个事件只有在用户确认选择（点击「确定」按钮）后才会触发，而ionSelect是单个选项被选中时就触发，刚好匹配你需要的时机。

内容的提问来源于stack exchange，提问作者johnny 5