Question

仅当折扣百分比大于0时，我才想显示折扣百分比和原始价格（被剔除）。我正在使用ngFor循环从服务器动态获取这两个值。 html。为了实现这一点，我使用了* ngIf指令，但是即使它为零，它也会显示所有折扣值。任何人都可以帮助。在此先谢谢您。I don't want to display the 0% discount as well as the strike out price.

我的component.html是：

<div *ngIf="discountPercent!==0">
    <div class="col-md-3" *ngFor="let product of productList">
      <figure class="card card-product"> 
        <div class="starburst discount" id="star" #rotateEl>
          <span></span>
          <span>{{product.Discount}}%</span>
        </div>
        <div class="img-wrap">
       <a routerLink="/product-details"><img src="assets/{{ product.Image }}"></a>  
        </div>
        <div class="parent">
        <div class="block-ellipsis">
          <span>{{product.ProductName}}</span>
        </div>
      </div>
        <div class="bottom-wrap">
          <div class="price-wrap h5">
            <span class="price-new">Rs.{{product.DiscountedPrice}}</span> &nbsp;
            <del class="price-old">Rs.{{product.OriginalPrice}}</del>
          </div>
        </div>
      </figure>
    </div>
  </div>

我的component.ts文件是：

export class ProductsComponent implements OnInit {
    discountPercent = 0;
     ngOnInit() {
        this.productsService.getProducts()
        .then((response:Response) => {
          console.log(response);
          this.productList = response;
          this.discountPercent = this.productList.Discount;
        })
        .catch(err => console.log(err));
      }
}

Answer 1

看起来像discountPercent变量不是必需的。尝试一下。

<div class="col-md-3" *ngFor="let product of productList">
  <figure class="card card-product"> 
    <div *ngIf="product.Discount" class="starburst discount" id="star" #rotateEl>
      <span></span>
      <span>{{product.Discount}}%</span>
    </div>
    <div class="img-wrap">
   <a routerLink="/product-details"><img src="assets/{{ product.Image }}"></a>  
    </div>
    <div class="parent">
    <div class="block-ellipsis">
      <span>{{product.ProductName}}</span>
    </div>
  </div>
    <div class="bottom-wrap">
      <div class="price-wrap h5">
        <span class="price-new">Rs.{{product.DiscountedPrice}}</span> &nbsp;
        <del *ngIf="product.Discount" class="price-old">Rs.{{product.OriginalPrice}}</del>
      </div>
    </div>
  </figure>
</div>

Answer 2

你可以试试吗？

在您的组件中，

export class ProductsComponent implements OnInit {
    discountPercent = 0;
    discountPercentBool:boolean;            // add bool variable
     ngOnInit() {
        this.discountPercentBool = false;   // default value on init
        this.productsService.getProducts()
        .then((response:Response) => {
          console.log(response);
          this.productList = response;
          if(this.productList.Discount>0){
             discountPercentBool = true;   // initialize vaule after api call
          }

        })
        .catch(err => console.log(err));
      }
}

您认为

<div *ngIf="discountPercentBool">

产品折扣显示和隐藏角度误差

2 个答案: