ioni c 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

Вы можете упростить свой код, просто передав индекс корзины, чтобы проверить наличие товара. Если вы получите значение ion-select с помощью ngModel, вы можете получить доступ к этому значению непосредственно в функции, не передавая его.

Там мы l oop запас выбранных вами продуктов. Если оставшееся количество меньше количества вашего товара, корзина отключена. Это добавит новый 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;
}