angular - 在 ionic 5 中触发离子选择组件上的更改事件

Question

每次我更改离子选择组件中的选项时，我都会尝试触发更改事件。问题是当我按下离子选择按钮弹出窗口中的确定按钮时会触发更改事件。我想每次选择一个选项时触发更改事件。

我最初的目标是选择一个选项并立即关闭弹出框。

PS请不要提出接口属性，因为我想保留离子警报的设计。

有任何想法吗？

我的代码：

在我的 html 文件中：

<ion-item>
  <ion-select value="-1" (ionChange)="triggerEvent()">
    <ion-select-option value="-1">All</ion-select-option>
    <ion-select-option value="a">A</ion-select-option>
    <ion-select-option value="b">B</ion-select-option>
    <ion-select-option value="c">C</ion-select-option>
  </ion-select>
</ion-item>

在我的 ts 文件中：

triggerEvent() {
    console.log('event trigger');
}

标签： angularionic-frameworkionic5ion-select

Answer 1

有两种方法可以实现：

解决方案 1

我建议如此轻松地做到这一点的一种方法是使用interface="popover"这样的输出和这样的输出：

<ion-item>
  <ion-select value="-1" interface="popover" (ionChange)="triggerEvent()">
   <ion-select-option value="nes">NES</ion-select-option>
    <ion-select-option value="n64">Nintendo64</ion-select-option>
    <ion-select-option value="ps">PlayStation</ion-select-option>
    <ion-select-option value="genesis">Sega Genesis</ion-select-option>
    <ion-select-option value="saturn">Sega Saturn</ion-select-option>
    <ion-select-option value="snes">SNES</ion-select-option>
  </ion-select>
</ion-item>

结果将如下所示：

灵魂 2

如果您想坚持相同的设计，您可以尝试在用户单击ion-select-option并手动关闭时添加事件侦听器，ion-select这将需要一些时间才能正确实现，但也可以这样做。