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

仅当折扣百分比大于0时，我才想显示折扣百分比和原价（去掉）。我使用ngFor循环从服务器动态获取这两个值。我只是在html中绑定它。 为了实现这一点，我使用了*ngIf指令。但它显示了所有折扣值，即使它为零。如何使用ngIf实现这一点。 有人帮我吗。提前谢谢

My 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>

你能试试这个吗

在您的组件中

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">

你能试试这个吗

在您的组件中

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">

---

看起来似乎不需要

折扣百分比

变量。试试这个

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

{{产品折扣}}}%
{{product.ProductName}
Rs.{{product.DiscountedPrice}
Rs.{{产品原始价格}

看起来似乎不需要

折扣百分比

变量。试试这个

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

{{产品折扣}}}%
{{product.ProductName}
Rs.{{product.DiscountedPrice}
Rs.{{产品原始价格}

您能在console.log（this.discountPercent）中检查初始化后打印的内容吗？初始化后打印的内容保持不变您能试试吗？是的，我已经试过了。但是我的预期结果没有任何问题您可以在console.log（this.discountPercent）中检查初始化后打印的内容吗？它在初始化后保持不变您可以尝试吗？是的，我已经尝试过了。但是我的预期结果没有出现。因为this.productList.Discount为0。只有当它大于0时，才会显示产品。我相信这就是你需要的。我错过什么了吗？是的。因为this.productList.Discount为0。只有当它大于0时，才会显示产品。我相信这就是你需要的。“我错过了什么吗？”阿尔西很高兴听到它在起作用。你可以把答案标记为正确，如果它解决了你的问题。是的，我又做了一次谢谢you@Arthi很高兴听到它在工作。如果解决了你的问题，你可以把答案标记为正确。是的，我又做了一次谢谢