Ionic 3 在选择时显示离子项目答案

【问题标题】：Ionic 3 show ion-item on selectIonic 3 在选择时显示离子项目
【发布时间】：2019-07-03 12:30:48
【问题描述】：

当我选择一个选项时，我需要显示该项目，但如果有人可以提供帮助，我不确定这样做有多糟糕，谢谢

    <ion-item>
        <ion-label floating>Reward </ion-label>
        <ion-select>
                <ion-option >Price reduction</ion-option>
                <ion-option (click)="onButtonClick()" >Discount </ion-option>
            </ion-select>
    </ion-item>

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

    </ion-item>

我希望当我点击折扣时，离子项目会显示，否则它不会显示。当我将它应用于离子选项时，它在按钮上工作正常，它不起作用。在此先感谢

【问题讨论】：

尝试类似(click)="buttonClicked = true" 并在您的组件中添加public buttonClicked: boolean;
当我在按钮上使用 (click)="buttonclicked()" 但它在选择器上不起作用时它可以工作
ok 然后创建一个方法public buttonclicked() { this.buttonClicked = true; }
不使用 true 也尝试使用 this.buttonClicked = !this.buttonClicked;两者都不能使用

标签： angular ionic3

【解决方案1】：

改用ionChange，并将函数调用放在ion-select 标签上，而不是ion-option。由于您只想在折扣为 chouse 时显示 div，因此我们为选项设置了一个值并在函数中进行检查：

<ion-select (ionChange)="onButtonClick($event)">
  <ion-option value="reduction">Price reduction</ion-option>
  <ion-option value="discount">Discount</ion-option>
</ion-select>

TS：

onButtonClick(ev) {
  ev === 'discount' ? this.buttonClicked = true : this.buttonClicked = false;
}

StackBlitz

【讨论】：

谢谢兄弟。但是我有 2 件商品，一件在点击降价时打开，另一件在打折时打开，你能告诉我 ionchange 将如何处理 2 件商品吗？
是的，我意识到当我仔细查看时，检查更新的答案:)
当我点击减少它也打开折扣项目。我添加其他行 ev === 'reduction' ？ this.buttonClicked2 = true : this.buttonClicked2 = false;像这样
我有两个 ion-items 。当我点击折扣时，我需要折扣 iem 显示，如果我点击减少，则需要显示减少项目。如果可能的话，请更新谢谢
好吧，你没有在你的问题中提出这个问题！但想法是一样的，当你选择减少时，你只需打开另一个 div。使用两个布尔标志和if else。