Ionic 3：选中指定ion-option时显示对应ion-item的实现求助

我明白你遇到的困扰——给ion-option绑定(click)事件确实不会生效，这是因为Ionic的ion-select组件是统一处理选择交互的，单个选项的点击事件会被组件内部逻辑拦截，没法直接触发你定义的方法。不过我们换个思路，用ion-select自带的ionChange事件就能完美实现需求。

解决方案步骤： #

• 给ion-select绑定双向数据绑定（[(ngModel)]）来跟踪选中的选项值
• 直接通过选中的值来控制下方折扣输入框的显示/隐藏，不用依赖buttonClicked变量

修改后的完整代码： #

模板部分（HTML）：

<ion-item>
  <ion-label floating>Reward </ion-label>
  <ion-select [(ngModel)]="selectedRewardType">
    <ion-option value="price-reduction">Price reduction</ion-option>
    <ion-option value="discount">Discount </ion-option>
  </ion-select>
</ion-item>

<ion-item *ngIf="selectedRewardType === 'discount'">
  <ion-label floating>Discount Percentage </ion-label>
  <ion-input type="text"></ion-input>
</ion-item>

组件类部分（TypeScript）：

// 在你的页面组件类中定义变量
selectedRewardType: string;

// 如果需要在选择变化时执行额外逻辑，可以添加这个方法
// onRewardChange() {
//   console.log('选中的奖励类型：', this.selectedRewardType);
//   // 其他自定义逻辑...
// }

原理说明： #

• ion-select的ionChange事件会在用户选择不同选项时触发，我们通过[(ngModel)]可以轻松获取当前选中的选项值
• 直接用*ngIf="selectedRewardType === 'discount'"来判断是否显示折扣输入框，逻辑更清晰，也符合Ionic组件的使用规范

这样调整后，当你选择"Discount"选项时，对应的输入框就会自动显示，选择其他选项则会隐藏，完全满足你的需求～

内容的提问来源于stack exchange，提问作者Umaiz Khan