时间戳

首页 > 解决方案 > 当用户在 Ionic 中的选择框中选择值时如何启用按钮

angular - 当用户在 Ionic 中的选择框中选择值时如何启用按钮

问题描述

我正在开发 Ionic Ecommerce 应用程序，我正在展示具有尺寸的产品，但问题是，我想限制用户选择产品尺寸，然后将产品移动到购物车，但我无法做到这一点。

这是我的productdetails.html：

<ion-header>

  <ion-navbar>
    <ion-title>Products</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<ion-row align-items-center class="mynewr11">
 <ion-col *ngFor="let product of this.pdeta" col-5 class="mynewcol22">
  <img class="myimg11" src="{{product.image}}" />
  <p>{{ product.product_name }}</p>

<ion-col *ngIf="nosize" style="padding: 0px;">
<ion-select placeholder="Select Size" [(ngModel)]="product.SelectedSize">
  <ion-option *ngFor="let psize of product.product_size" value="{{psize.size}}">{{psize.size}}</ion-option>
</ion-select>
</ion-col>

  <button [disabled]="!isenabled" class="mybtn11" (click)="addToCart(product)" ion-button small>
    Add to Cart
  </button>

</ion-row>
</ion-content>

在productdetails.ts中： 

isenabled: boolean = false;

在这个 html 中，我展示了产品尺寸和 AddToCart 按钮。我希望用户先选择尺寸，然后将产品移至购物车。我最初禁用了该按钮，它会在用户选择大小时启用，但问题是我无法应用选择值逻辑。任何帮助深表感谢。

标签： angularionic-frameworkionic3

解决方案

您可以在 ion-select 上收听更改事件，如果选择的值被接受，您可以更改 isenabled 值：

valueChanged(event) {
  isenabled = true;
}
<ion-select (ionChange)="valueChanged($event)">

另一种选择是将 [enabled] 绑定到 selectedSize 的值：

<button [disabled]="!product.SelectedSize" class="mybtn11" (click)="addToCart(product)" ion-button small>
    Add to Cart
  </button>

推荐阅读