以角度 8 在表单控件中输入数量时获取总值

Posted 2023-03-25

【中文标题】以角度 8 在表单控件中输入数量时获取总值

【英文标题】：Get total value when input a quantity in form control in angular 8

【发布时间】：2021-12-01 06:41:18

【问题描述】：

我试图通过客户输入的数量获得每个项目的总价值，但找不到实现目标的方法。我从 JSON 中获取价格，当客户在 formControl 中输入数量时，我想将该 price*quantity 相乘并设置为下一列。

HTML 代码

 <ng-container *ngFor="let attItems of filteredProductAttributeItems; let i = index">
                <tr>
                  <td [attr.rowspan]="attItems.ProductAttributeItems.length + 1"> attItems.Name </td>
                </tr>
                <tr *ngFor="let att of attItems.ProductAttributeItems">
                  <td> att.MasterProductAttributeItem.Name </td>
                  <td> att.PriceAdjustment </td>
                  <td style="width: 15%; white-space: nowrap">
                    <input type="number" class="form-control form-control-sm" placeholder="Quantity" min="0" />
                  </td>
                  <td></td>
                </tr>
</ng-container> 

TS 代码

filteredProductAttributeItems: any[] = [];

clickToExpandAttItems(product) 
    this.productService.getProductAttributesItems(product.Id).subscribe(x => 
     Object.assign(this.filteredProductAttributeItems, x);
    );
 

Idea how I need

【参考方案1】：

您可以使用 ngModel 双向绑定将您的输入绑定到数量：

<td style="width: 15%; white-space: nowrap">
    <input type="number" class="form-control form-control-sm" placeholder="Quantity" min="0" [(ngModel)]="att.Quantity" />
</td>
<td>att.Quantity * att.PriceAdjustment result</td>

【讨论】：

数量不是来自我的 API。

创建您自己的包含此逻辑的模型，并将 API 中的数据映射到它。如果您的表示逻辑与您的 API 数据分开，那么它会更容易发展。