带有可选参数的角度计算

Question

我正在为我们的销售代表实施一种工具，使他们能够与客户协商价格。我正在从后端加载带有费率计划和费用的产品列表，并在前端的表格中将其显示给用户。 1 个产品有 n 个费率计划（您只能选择一个），一个费率计划有 n 个费用（一次安装费、0 或 n 个每月固定费用和可选的 0-2 次每次使用费用）。销售代表可以对每笔费用给予折扣。在您定义数量时也会产生费用。

每行的最后一列应显示不带数量的费用的折扣价格，计算应为 listprice - (listprice/100*discount)。 对于有数量的费用，计算应如下所示： (listprice-(listprice/100*qantity))*数量

                             <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>LISTPRICE</th>
                        <th>DISCOUNT AMOUNT</th>
                        <th>DISCOUNT PERCENTAGE</th>
                        <th>QUANTITY</th>
                        <th>PRICE</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>{{ rateplancharge.pricing['0'].price }}<span matSuffix>.00 {{ rateplancharge.pricing['0'].currency }}</span></td>
                        <td>
                            <mat-form-field appearance="outline"><input matInput disabled placeholder="Discount" value="{{ getDiscount(rateplancharge.pricing['0'].price, discountP.value | number : '1.2-2' ) }}" type="number" style="text-align: right"></mat-form-field>
                        </td>
                        <td>
                            <mat-form-field appearance="outline">
                                <input matInput placeholder="Discount %" min="0" max="10" value="0" type="number" style="text-align: right" #discountP>
                                <span matSuffix>.00 %</span>
                            </mat-form-field>
                        </td>
                        <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" value="{{ rateplancharge.defaultQuantity }}" type="number" style="text-align: right" #quantityP id="quantityP{{ratePlanChargeIndex}}">
                            </mat-form-field>
                        </td>

                        <td>{{ total(rateplancharge.pricing['0'].price, discountP.value, ratePlanChargeIndex, quantityP) }}</td>
                    </tr>
                </table><br />
                <mat-divider></mat-divider>
            </div>
        </div>

我根据是否应用数量来调用具有不同输入参数的函数 total()

函数如下所示：

  total(listprice, discount, index, quantityP?) {
    if (document.getElementById('quantityP' + index) !== null) {
      quantityP = document.getElementById('quantityP' + index).value;
    } else {
      quantityP = 1;
    }
    return (listprice - (listprice / 100) * discount) * quantityP;
  }

由于某种原因，数量始终未定义。有没有人知道为什么或知道一种解决方法（我想实现一个 value="1" 的隐藏输入字段，所以一个被传递给 total ......但我遇到了同样的问题......）

感谢您的支持！ :)

Answer 1

total(rateplancharge.pricing['0'].price, discountP.value, quantityP)

应该是

total(rateplancharge.pricing['0'].price, discountP.value, quantityP.value)