带可选参数的角度计算

Question

I'm implementing a tool for our sales reps to enable them to negotiate prices with customers. I'm loading a list of products with rateplan and charges from a back end and show it to the user in a table in the frontend. 1 product has n rateplans (you would only select one) and one rateplan has n charges (one time fees for setup, 0 or n flat fees which occurs monthly and optional 0-2 pay per per use fees). The sales rep can give discount on each charge. There are also charges where you define a quantity.

the last column of each row should show the discounted price for charges WITHOUT quantities the calculation should be listprice - (listprice/100*discount). For charges WITH quantities the calculation should be like this: (listprice-(listprice/100*qantity))*quantity

                             <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>

I'm calling the function total() with different input parameters based on if there is quantity applying or not

the function looks like this:

  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;
  }

for some reason the quantity is always undefined. Does anybody have an idea why or knows a workaround (I was thinking to implement a hidden input field with value="1" so one is being passed to total... But I ran into the same issue...)

Appreciate your support! :)

Answer 1

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

实际上应该是

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