将每个项目的价格乘以数量 angular 8答案

【问题标题】：Multiply price into quantity for each items angular 8将每个项目的价格乘以数量 angular 8
【发布时间】：2021-11-29 13:48:43
【问题描述】：

我在表格中有一个产品列表，每个项目都有一个值，当用户在文本框中输入数量时，我想获得价值并将其显示在下一列中。我尝试了以下方法，它将所有项目的值相乘。

Ts 代码

  clientProductForm = new FormGroup({
    productQty: new FormControl("", Validators.required)
  });

  proQty: number;

  quantityChange(event) {
    this.proQty = this.clientProductForm.get("productQty").value;
  }

HTML 代码

<tr *ngFor="let products of clientProducts">
    <td>{{ products.Name }}</td>
    <td>{{ products.DistributorPrice}}</td>
    <td><input type="number" class="form-control my-n1" formControlName="productQty" (keyup)="quantityChange($event)" /></td>
    <td>{{ products.DistributorPrice * proQty}}</td>
    <td>
        <button class="btn btn-success">Add</button>
    </td>
</tr>

Sample Image

【问题讨论】：

add按钮有什么用？
@navnath 客户端填写数据后。我会用它来发帖
您只有一个 proQty - 但有多个产品..
@MikeOne 有没有办法实现我的目标或者你有 B 计划？
您可能希望扩展您的产品数组并为每个产品添加数量和小计键。

标签： angular typescript angular-reactive-forms

【解决方案1】：

我们可以通过一种非常简单的方式来实现这一点，如下声明clientProducts变量：

  clientProducts = [
    { Name: "First Product", DistributorPrice: "2500", Quantity: 0 },
    { Name: "Second Product", DistributorPrice: "1850", Quantity: 0 },
    { Name: "Class Change", DistributorPrice: "250", Quantity: 0 }
  ];

  quantityChange(event, product) {
    console.log(event, product);
  }

在 HTML 中，使用 Quantity 属性作为 ngModel 并在 Total 中乘以 DistributorPrice and Quantity：

<tr *ngFor="let products of clientProducts">
  <td>{{ products.Name }}</td>
  <td>{{ products.DistributorPrice}}</td>
  <td>
    <input
      type="number"
      class="form-control my-n1"
      [(ngModel)]="products.Quantity"
      (keyup)="quantityChange($event, products)"
    />
  </td>
  <td>{{ +products.DistributorPrice * +products.Quantity}}</td>
  <td>
    <button class="btn btn-success">Add</button>
  </td>
</tr>

这可能对你有用。 Click here 观看演示。

谢谢

【讨论】：

【解决方案2】：

你需要一个 FormControls 的 FormArray，而不是一个 FormControl（嗯，你也可以使用一个 FormControls 的数组）

  clientProductForm:FormArray

  clientProductForm = new FormArray(
   this.clientProducts.map(x=>new FormControl("",Validators.required))
  });

是的，您创建了一个 FormArray，其中包含许多控件，因为元素具有您的数组 clientProduct。我们使用映射来创建一个空的 formArray 并在 clientsProducts 上循环。

使用辅助功能

getQuantity(index)
{
   return this.clientProductForm.at(index) as FormControl
}

并遍历 formArray.controls

<tr *ngFor="let control of clientProductForm.controls;let i=index">
    <!--see that you use clientProducts[i] to get the "product"-->
    <td>{{ clientProducts[i].Name }}</td>
    <td>{{ clientProducts[i].DistributorPrice}}</td>
    <td><input type="number" class="form-control my-n1" 
       [formControl]="getQuantity(i)" /></td>
    <!--wee need "convert to number" the input, is the reason
        to use the "+" in (+clientProductForm[i].value)-->
    <td>{{ clientProducts[i].DistributorPrice *
                  (+clientProductForm.value[i])}}</td>
    <td>
        <button class="btn btn-success">Add</button>
    </td>
</tr>

看到在 clientProductForm.value 你只有一个包含数量的数组，例如[3,5.6,8,10]，所以我想你的函数“提交”可以像

submit(){
  const data=this.clientProductForm.value.map((x,i)=>(
    { 
      name:this.clientProducts[i].name,
      quantity:x
  )
  console.log(data)
}

向您的服务发送一个对象数组，例如“名称”和“数量”

【讨论】：