Question

我有一个问题。我正在尝试制作类似于购物车的功能，用户将商品添加到“购物车”，然后如果他们调整商品的数量，则总价格会根据数量而变化。

目前，我有两个输入，零售价格和数量。如果零售价格或数量发生变化，那么我必须更新总金额。

奇怪的是，如果我更新商品数量，产品*数量会在应用程序中正确反映出来。但是，如果我只更新零售价格，那么在我再次更新数量之前不会更新任何内容。

我在这里做错了什么？

html片段：

<span>
    <div>Retail Price* </div>
    <div><input #retailPrice formControlName="retailPrice" value="{{product.price}}" (change)="updateTotal(retailPrice.value, quantity.value)" placeholder="{{'EnterPrice' | translate}}"/>x</div>
</span>
<span>
    <div>Qty</div>
    <div >
        <input #quantity type='number' name='quantity' value="1" oninput="validity.valid||(value=1);" class='qty' (change)="updateTotal(retailPrice.value, quantity.value)"/>=</div>
</span>
<span>
    <div>
        Price
    </div>
    <div><br></div>
    <div>
        ${{totalAmount | number : '1.2-2'}}
    </div>
</span>

updateAmount函数：

 updateTotal(retailPrice: number, number: number) {
      this.quantity = number;
      this.totalAmount = retailPrice * number;
  }

Answer 1

首先，(change)不适用于文字输入。您应该使用(keypress)或(keyup)

其次，您忘记在<div>

之后关闭<input #quantity...>代码

第三，您的代码似乎正常运行。您的控制台是否记录了任何错误？

Answer 2

这是因为您的总金额仅在您使用您的功能更新总额后设置，您应该在更改详细价格后更新总金额。

Answer 3

<span>
    <div>Retail Price* </div>
     <div><input #retailPrice formControlName="retailPrice" ng-model= 
         "product.price" placeholder="{{'EnterPrice' | translate}}"/>x</div>
</span>
<span>
      <div>Qty</div>
      <div >
           <input #quantity type='number' name='quantity' ng- 
                model='quantity' oninput="validity.valid||(value=1);" 
             class='qty' />
      </div>
</span>
<span>
      <div>Price</div>
       <div><br></div>
       <div>
             ${{produce.price * quantity | number : '1.2-2'}}
        </div>
</span>

在控制器范围内的输入和对象product.price和quantity之间设置双向绑定。将数量的默认值设置为1.

注意：不要使用spans包围周围的div，而是在你的css或样式属性中将div设置为内联，这样就不会有换行符。

计算所添加商品的总价

3 个答案: