Question

在角度5中，我正在创建一个应用程序，用户可以选择产品的数量和价格，一旦完成，产品价格和数量将显示在总价格中。这是我的代码，只显示Total 0

我的HTML代码：

<div class="input-field col s12">
      <input formControlName="Quantity" id="Quantity " type="number" class="validate">
    </div>
    <div class="input-field col s12">
      <input formControlName="Unit_price" id="Unit_price" type="number" class="validate">
    </div>
    <div class="input-field col s12">
      <input formControlName="Subtotal" id="Subtotal" type="number" class="validate">
      <label for="Subtotal">Total {{Price}}</label>
    </div>

Ts代码：

  Price: number = 0;
  products: Products[];

      countPrice() {
        this.Price = 0;
        for (let p of this.products) {
          this.Price += p.Unit_price * p.Quantity
        }
         }

你能建议我，问题是什么，以及如何解决这个问题？

Answer 1

您没有在任何地方致电countPrice（至少使用您提供的代码）所以Total * {{Price}} = 0因为Price初始值为0

Answer 2

您在countPrice中计算的值可以直接添加到模板中，如下所示：

{{ form.values.Quantity * form.values.Unit_price }}

Answer 3

您没有调用您的函数 countPrice（）。我已更新您的代码并在html中调用 countPrice（）。

<div class="input-field col s12">
  <input formControlName="Quantity" id="Quantity " type="number" class="validate">
</div>
<div class="input-field col s12">
  <input formControlName="Unit_price" id="Unit_price" type="number" class="validate">
</div>
<div class="input-field col s12">
  <input formControlName="Subtotal" id="Subtotal" type="number" class="validate">
  <label for="Subtotal">Total {{countPrice()}}</label>
</div>

现在在 countPrice（）函数中返回 this.Price 请参阅更新功能。

     Price: number = 0;
     products: Products[];

        countPrice() {
            this.Price = 0;
            for (let p of this.products) {
              this.Price += parseInt(p.Unit_price) * parseInt(p.Quantity)
            }
             return this.Price;
             }

当我把数量和价格打字稿html时，我的总数为0

3 个答案: