Question

所以我正在尝试创建购物车类功能，但在我的场景中，用户输入一个数字，然后将产品添加到列表中以显示给最终用户。用户可以编辑产品的价格和数量，在更新时，该特定产品的总价格也应该更新。

我现在面临的问题是我输入两个数字，例如1234和2345，生成两个“订单”div，它们都有价格和数量信息供用户更改。现在，当我更改价格或数量时，它会影响总金额。特别是对于那个产品，它工作正常，但由于我输入了两个sku编号，因此两个产品的总金额都会更新到最后一次更改。因此，产品1的变化会影响产品2，反之亦然。

我想知道如何通过此功能解决这些问题？

这是一个stackbiltz，我把问题重现了（抱歉这个糟糕的布局，这是我可以提供的最小样本，我不想花时间修复布局）：https://stackblitz.com/edit/angular4-nsy31g

以下是代码：

组件：

 quantity = 1;
  retailPrice: number;
  totalAmount: number;
  extendedPrice: number;
  orderDetails: Array<IOrderDetails> = [];
  order: IOrderDetails;
  showDetails;

 validateNumber(number: number) {

   this.order = {
        _extendedPrice : 195.95,
        _retailPrice :  195.95,
        _quantity : 1,
        _productSkuKey : number,
        _lineItemNumber : 1
      }; 

      this.retailPrice = 195.95;
      this.extendedPrice = this.retailPrice * this.quantity;
      this.totalAmount = this.retailPrice * this.quantity;

      this.orderDetails.push(this.order);
      this.showDetails = true;

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

  }

html：

<p>Calculate values</p>
<input #number type="number">
<button (click)="validateNumber(number.value)">enter</button>

<div *ngIf="showDetails">
  <div *ngFor="let order of orderDetails; let idx = index">
  <span>
        <div style="padding-left:20px;padding-bottom:10px;">Price* </div>
        <div><input #retailPrice class="transactionInput" style="width: 120px !important;" (keyup)="updateTotal(retailPrice.value, quantity.value, idx)" value="195.95" placeholder="Enter Price"/>x</div>
        </span>
        <span>
        <div style="text-align:center;padding-right:30px;padding-bottom:10px;">Qty</div>
        <div style="text-align:center;">
          <input #quantity type='number' value="1" min=1 oninput="validity.valid||(value=1);" class='qty' (change)="updateTotal(retailPrice.value, quantity.value,idx)"/> =</div>
    </span>
      <span>
            <div style="text-align:center;">
              Extended Price
            </div>
            <div><br></div>
            <div style="text-align:center;">
              USD ${{extendedPrice | number : '1.2-2'}}
            </div>
      </span>
</div>
 <div class="transactionDiv3">
      <div style="font-weight:bold; text-align:right; padding-right:20px; padding-bottom:20px;"> TotalOrderAmount $ {{totalAmount | number : '1.2-2'}} </div>
  </div>
</div>

重复问题：

1）更新零售价格或数量只显示更新特定项目/行的订单而不是其他订单如果我向列表添加其他订单

2）总金额应该是列表中所有订单的总和。

谢谢！

Answer 1

嗯，你有一些问题。我已经在https://stackblitz.com/edit/angular4-onsxlh

修复了它们

问题是：

当您向orderDetails数组添加新订单时，您要反复添加相同的对象，因此如果您修改了一个，则修改所有：

this.orderDetails.push(this.order);

如果您希望this.order成为默认对象，则必须克隆该对象，而不是这样：

this.orderDetails.push({...this.order});

现在，我们不是添加相同的对象，而是添加对象的克隆。

当您致电updateTotal时，您永远不会使用正在修改的订单的indx。相反，我不知道你在做什么，修改相同的全局变量（在组件内），无论你正在编辑哪个顺序。此外，在模板中，您为每个项目呈现变量extendedPrice，因此您始终获得相同的值是合乎逻辑的。

要解决此问题，您必须呈现order._extendedPrice的值，以便显示该项目的费用。此外，在updateTotal中，您必须修改当前订单的值，而不是全局变量：

updateTotal(retailPrice: number, number: number, indx: number) {
  const order = this.orderDetails[indx];
  order._retailPrice = retailPrice;
  order._quantity = number;
  order._extendedPrice = retailPrice * number;
  this.getTotal();
}

最后，您永远不会计算所有订单的总和。为此，我添加了getTotal方法，使用reduce汇总每个订单的延期价格。

现在它按预期工作。

更新订单信息会影响其他订单信息

1 个答案: