离子4使离子项目透明取决于选择的值

Question

如果使用<select>选择的值大于数据库中的值，我希望使特定的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的值，则可以直接在函数中访问该值，而无需传入。

在这里，我们循环您选择的产品库存。如果剩余数量小于您的产品数量，则购物车将被禁用。这将向项目添加一个新的css类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;
}