简单数学和简单显示 // 隐藏角度

Question

Hi.

所以我正在学习角度，我建立了一个计算总商品价格的购物车服务。 但现在IAM坚持显示折扣。

我想要实现的目标：显示2种不同的折扣。 但我就是无法正确计算它(尝试在我的函数中实现简单的数学不起作用。

所以：

<h1>TOTAL: {{total}}</h1>
<p *ngIf="total > 200" >DISCOUNT 10% NEW PRICE  </p>
<p *ngIf="total > 500" >DISCOUNT 20% NEW PRICE </p>

如果第一个 P 超过 500，如何隐藏它？ ATM两者都将显示

我的总数在购物车服务模块中以这种方式计算：

calculatePrice(){
let calcPrice: number = 0;
for(let item of this.items){
calcPrice += item.price;
}
return calcPrice; }

在这里，我尝试在返回之前添加简单的数学，例如 calcprice/100 * 90。 不工作那么我怎样才能输出新的总数呢？

Answer 1

将其更改为：

<h1>TOTAL: {{total}}</h1>
<p *ngIf="total < 500;else show_major_500" >DISCOUNT 10% NEW PRICE  </p>
<ng-template #show_major_500> <p>DISCOUNT 20% NEW PRICE </p></ng-template>

仅当总数小于 500 时才会显示第一段;如果超过 500，则显示第二个折扣

Answer 2

对于第一部分，这非常简单，只需将附加条件添加到*ngIf即可。您可能还想将条件更改为>=对吗？所以它应该看起来像这样：

<p *ngIf="total >= 200 && total < 500" >DISCOUNT 10% NEW PRICE  </p>
<p *ngIf="total >= 500" >DISCOUNT 20% NEW PRICE </p>

对于第二部分，您还应该能够通过一些简单的条件和简单的数学来做到这一点：

calculatePrice(){
let calcPrice: number = 0;
for(let item of this.items){
calcPrice += item.price;
}
if (calcPrice >= 200 && calcPrice < 500) {
return Math.round(calcPrice * 90) / 100
} else if(calcPrice >= 500) {
return Math.round(calcPrice * 80) / 100
}
return calcPrice; 
}