Невозможно определить фактическую цену в зависимости от того, доступна ли скидка в Ionic.

Question

Я работаю в Ionic Ecommerce App и использую API, созданный в Laravel. Я выбрал продукты, в которых я показываю фактическую цену, скидку и окончательную цену. Но проблема в том, что если скидка равна 0, она не должна совпадать с фактической ценой, а если скидка существует, она должна отбрасывать фактическую цену и показывать окончательную цену.

Это мой 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>
  <p><strong>Actual Price:</strong> <span [ngStyle]="product.discount === 0 && {'text-decoration':'line-through'}  || product.discount === 1 && {'text-decoration':'none'}">₹{{product.product_price * product?.count}}</span></p>
  <p><strong>Discount:</strong> {{product.discount}}%</p>
  <p><strong>Discount Price:</strong> ₹{{ product.product_actual_price * product?.count }}</p>
  <button class="mybtn11" (click)="addToCart(product)" ion-button small>
    Add to Cart
  </button>
  <button ion-button icon-only class="wish-list-btn card" (click)="toggleOnWishlist(product)" color="light" class="mywisbtn11">
    <ion-icon [name]="product.onWishlist ? 'ios-heart' : 'heart-outline' "></ion-icon>
  </button>
 </ion-col>
</ion-row>
</ion-content>

В этом html я применил style = "text-decor: line-through" к фактической цене, но когда скидка равна 0, она не должна совпадать с фактической ценой. Я применил это по фактической цене, но он не работает:

[ngStyle]="product.discount === 0 && {'text-decoration':'line-through'}  || product.discount === 1 && {'text-decoration':'none'}"

Логин:

ionViewDidLoad() {
    if(product.discount == '0')
    {
       dont strike off the actual price
    }
    else
    {
        strike off the actual price
    }
  }

Я пытаюсь применить логин, но не могу его получить. Я также определяю ссылку в скидке. Буду признателен за любую оказанную помощь.

Answer 1

То, как вы применили [ngStyle], неверно.

Попробуйте это:

<p>
  <strong>Actual Price:</strong>
  <span [ngStyle]="product.discount === 0 ? {'text-decoration':'line-through'} : {'text-decoration':'none'}">
    ₹{{product.product_price * product?.count}}
  </span>
</p>

---

Вот Рабочий образец StackBlitz для вашей ссылки.