ionic 4 根据所选值使离子项目透明

Question

如果使用 <select> 选择的值大于数据库中的值，我想使特定的 ion-item 透明或模糊。为此，我有一个名为 disabled 的属性。但是我不能动态地使 ion-item 透明。提前谢谢你

  onChange(new_quantity,object, stock  ) {
    let stocks = stock

     for(let i=0; i<stocks.length; i++) {
            if(new_quantity > stocks[i].RemainingQuantity){


              console.log(new_quantity)
              console.log(object.quantity)
              console.log(stocks[i].RemainingQuantity)

              object.disabled = true
              console.log("quantity not available")

              this.presentAlert()
            }
    }
}

html

<ion-list>
    <ion-item *ngFor="let p of cart ;  let i=index" class="ion-text-wrap">

            <ion-grid>

              <div class="ion-text-end" *ngIf="p.disabled">
                <ion-label color="tertiary">Out of stock</ion-label>
              </div>

     <select style="max-width:50%;" (change)="onChange($event.target.value, p, p.product.stocks) " [value]=p.quantity  > 

      <option  [ngValue] = "q" *ngFor ="let q of quantity" >{{q}}</option>
      </select>
      </ion-grid>

        </ion-item>
</ion-list>

Answer 1

您可以通过仅传递购物车索引来检查产品库存来简化代码。如果你用 ngModel 得到 ion-select 的值，你可以直接在函数中访问那个值而不用传入它。

我们在那里循环您选择的产品库存。如果 remainingQuantity 少于您的 productQuantity，则购物车将被禁用。这将为您的项目添加一个新的 css class item-disabled，将背景设置为透明。

Html

<ion-list>
  <ion-item *ngFor="let c of cart; let i=index" class="ion-text-wrap" [ngClass]="{ 'item-transparent': c.disabled  }">
    <ion-grid>
      <div class="ion-text-end" *ngIf="c.disabled">
        <ion-label color="tertiary">Out of stock</ion-label>
      </div>
      <ion-select style="max-width:50%;" [(ngModel)]="productQuantity" (ionChange)="checkIfProductIsOutOfStock(i)" value="c.quantity"> 
        <ion-select-option value="quantity" *ngFor="let quantity of c.quantity">{{ quantity }}</ion-select-option>
      </ion-select>
    </ion-grid>
  </ion-item>
</ion-list>

Ts

productQuantity: number;

checkIfProductIsOutOfStock(index: number) {
  const stocks = this.cart[index].products.stocks;

  stocks.forEach((stock: object) => {
    if (this.productQuantity > stock['RemainingQuantity'] {
      this.cart[index].disabled = true;
    }
  });
}

Css

.item-transparent {
  --background: transparent;
}

ionic 4 根据所选值使离子项目透明

ionic 4 make ion-item transparent depending upon selected value

css

ionic4

Html

Ts

Css