我正在开发CPQ（配置定价报价系统）的原型。有一个多步骤表单：1.选择客户并提供合同明细等。2.选择费率计划，并3.调整价格。
在第三步中，我将显示每个价位计划的标价。 输入折扣以根据以下参数计算每个项目的单价时，我需要调用一个函数： 方案1：标价-折扣％（*数量[可选]）=此项目的总计 方案2：标价-折扣（绝对）（*数量[可选]）=该商品的总计 ->有两个或三个字段应触发更新：绝对折扣，折扣％甚至数量（取决于产品类型）。
我写了一个函数，该函数根据以下的折扣百分比计算价格，以及相关的HTML代码 TS中的功能
discountpercentage(price: number, discountP: number) {
this.total = +price - (+price * +discountP / 100);
}
HTML
<div>
<span>PRODUCT RATE PLAN</span>
<mat-divider></mat-divider>
<div *ngFor="let product of orderIntake">
<br />
<span class="rightpadding"><b>Product:</b> {{ product.productName }}</span><span class="rightpadding"><b>Rate plan:</b> {{ product.productRatePlans.name }}</span>
<table class="subtable">
<tr class="header"><th>CHARGE NAME</th><th>TYPE</th><th>MODEL</th><th>UOM</th><th>PRICE</th><th>DISCOUNT AMOUNT</th><th>DISCOUNT PERCENTAGE</th><th>QUANTITY</th><th>TOTAL</th></tr>
<tr><td colspan="11"><mat-divider></mat-divider></td></tr>
<tr *ngFor="let rateplancharge of product?.productRatePlans.productRatePlanCharges">
<td>{{ rateplancharge.name }}</td>
<td>{{ rateplancharge.type }}</td>
<td>{{ rateplancharge.model }}</td>
<td>{{ rateplancharge.uom }}</td>
<td>
<table>
<tr *ngFor="let price of rateplancharge.pricing | currencyFilter : 'USD'">
<td>{{ price.price }}<span matSuffix>.00 {{ price.currency }}</span></td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let price of rateplancharge.pricing | currencyFilter : 'USD'">
<td><mat-form-field appearance="outline"><input matInput placeholder="Discount" min="0" max="maxDiscount(100)" ng-change="discountpercentage()" value="0" type="number" ng-model="discount" style="text-align: right"><span matSuffix>.00</span></mat-form-field></td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let price of rateplancharge.pricing | currencyFilter : 'USD'">
<td><mat-form-field appearance="outline"><input matInput placeholder="Discount %" min="0" max="10" (change)="discountpercentage(price.price, discountP.value)" value="0" type="number" style="text-align: right" #discountP><span matSuffix>.00 %</span></mat-form-field></td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let price of rateplancharge.pricing | currencyFilter : 'USD'">
<td style="text-align: center"><span *ngIf="!rateplancharge['defaultQuantity']">N.A.</span><mat-form-field appearance="outline" *ngIf="rateplancharge.defaultQuantity"><input matInput placeholder="Quantity" min="0" (change)="priceCalc()" value="{{ rateplancharge.defaultQuantity }}" type="number" ng-model="quantity" style="text-align: right"></mat-form-field></td>
</tr>
</table>
</td>
<td>{{ total }}</td>
</tr>
</table><br />
<mat-divider></mat-divider>
</div>
</div>
问题是每个不同订单项的总计相同。我不知道如何分开每个项目的总数。 如何分别计算每个项目的总数？
答案 0 :(得分：0)
一种实现目标的方法是完全消除total变量，并使用根据输入输出正确总值的函数将其替换为模板中的变量。因此，您可以更改此设置：
{{total}}
具有这样的内容：
{{getTotal(price, discountPercentage)}}
或者，您可以将total变量扩展为一个数组数组，并像这样使用它：
discountpercentage(price: number, discountP: number, productIndex: number, ratePlanChargeIndex: number)
{
this.total[productIndex][ratePlanChargeIndex] = +price - (+price * +discountP / 100);
}
在模板中，您需要像这样调用productIndex函数的任何地方传递ratePlanChargeIndex和discountpercentage：
<div>
<span>PRODUCT RATE PLAN</span>
<mat-divider></mat-divider>
<div *ngFor="let product of orderIntake; let productIndex = index">
<br />
<span class="rightpadding"><b>Product:</b> {{ product.productName }}</span><span class="rightpadding"><b>Rate plan:</b> {{ product.productRatePlans.name }}</span>
<table class="subtable">
<tr class="header"><th>CHARGE NAME</th><th>TYPE</th><th>MODEL</th><th>UOM</th><th>PRICE</th><th>DISCOUNT AMOUNT</th><th>DISCOUNT PERCENTAGE</th><th>QUANTITY</th><th>TOTAL</th></tr>
<tr><td colspan="11"><mat-divider></mat-divider></td></tr>
<tr *ngFor="let rateplancharge of product?.productRatePlans.productRatePlanCharges; let ratePlanChargeIndex = index">
<td>{{ rateplancharge.name }}</td>
<td>{{ rateplancharge.type }}</td>
<td>{{ rateplancharge.model }}</td>
<td>{{ rateplancharge.uom }}</td>
<td>
<table>
<tr *ngFor="let price of rateplancharge.pricing | currencyFilter : 'USD'">
<td>{{ price.price }}<span matSuffix>.00 {{ price.currency }}</span></td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let price of rateplancharge.pricing | currencyFilter : 'USD'">
<td><mat-form-field appearance="outline"><input matInput placeholder="Discount" min="0" max="maxDiscount(100)" ng-change="discountpercentage(0, 0, productIndex, ratePlanChargeIndex)" value="0" type="number" ng-model="discount" style="text-align: right"><span matSuffix>.00</span></mat-form-field></td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let price of rateplancharge.pricing | currencyFilter : 'USD'">
<td><mat-form-field appearance="outline"><input matInput placeholder="Discount %" min="0" max="10" (change)="discountpercentage(price.price, discountP.value, productIndex, ratePlanChargeIndex)" value="0" type="number" style="text-align: right" #discountP><span matSuffix>.00 %</span></mat-form-field></td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let price of rateplancharge.pricing | currencyFilter : 'USD'">
<td style="text-align: center"><span *ngIf="!rateplancharge['defaultQuantity']">N.A.</span><mat-form-field appearance="outline" *ngIf="rateplancharge.defaultQuantity"><input matInput placeholder="Quantity" min="0" (change)="priceCalc()" value="{{ rateplancharge.defaultQuantity }}" type="number" ng-model="quantity" style="text-align: right"></mat-form-field></td>
</tr>
</table>
</td>
<td>{{ total }}</td>
</tr>
</table><br />
<mat-divider></mat-divider>
</div>
</div>