Ionic4：根据选中值动态设置ion-item透明/模糊的实现问题

你已经正确给对象设置了disabled属性，但缺少将这个属性和ion-item的样式关联的关键步骤，下面是具体的解决方案：

步骤1：给ion-item绑定动态样式 #

修改你的HTML代码，在ion-item上通过[ngClass]根据p.disabled的值动态应用样式类：

<ion-list> 
  <ion-item 
    *ngFor="let p of cart ; let i=index" 
    class="ion-text-wrap"
    [ngClass]="{'blur-disabled-item': p.disabled}"
  > 
    <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>

步骤2：定义透明模糊的CSS样式 #

在组件对应的CSS文件（比如your-component.component.css）中添加以下样式，实现透明和模糊效果：

.blur-disabled-item {
  opacity: 0.5; /* 可调整透明度，0为完全透明，1为不透明 */
  filter: blur(1px); /* 模糊程度可根据需求修改数值 */
  pointer-events: none; /* 可选：禁用该item上的所有交互，防止用户误操作 */
}

步骤3：优化TypeScript逻辑（可选但推荐） #

你的现有代码里，$event.target.value是字符串类型，建议先转为数字再做比较；另外循环库存时可以提前跳出，提升效率：

onChange(new_quantity: string, object: any, stock: any[]) { 
  const selectedQty = Number(new_quantity);
  let isOutOfStock = false;

  for(let i=0; i<stock.length; i++) { 
    if(selectedQty > stock[i].RemainingQuantity){ 
      isOutOfStock = true;
      break; // 找到库存不足的项就停止循环
    } 
  } 

  object.disabled = isOutOfStock;
  if(isOutOfStock) {
    console.log("quantity not available");
    this.presentAlert();
  }
}

额外注意点 #

如果你的cart数组是从接口返回的原始数据（不可变对象），Angular可能无法检测到disabled属性的变化，这时可以在修改属性后重新赋值数组触发变更检测：

// 修改完object.disabled后执行
this.cart = [...this.cart];

这样就能实现当选中数量超过库存时，对应的ion-item自动变成透明模糊的效果了。

内容的提问来源于stack exchange，提问作者pratik jaiswal