Question

我正在使用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按钮。我希望用户先选择尺寸，然后将产品移至购物车。我最初禁用了该按钮，当用户选择大小时它将启用，但问题是我无法应用选择值逻辑。非常感谢您的帮助。

Answer 1

您可以在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>

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

1 个答案: