angular - 在 Typescript 中计算 `total` 并更新 `total=quantity*price`

Question

我想计算这样total= quantity*price的东西：并更新total时间quantity或price变化。

模板输出快照

app.component.html

<form [formGroup]="editform" (ngSubmit)="edisale()" class="col s12" materialize>
    <div class="form-group">
        <table align="center" class="table table-bordered table-hover">
            <thead>
                <tr style="color:black;">
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Notes</th>
                    <th>Subtotal</th>
                </tr>
            </thead>
            <tbody>
                <tr formArrayName="products" class="group" style="cursor: pointer" *ngFor="let sale of editform.get('products').value; let i = index" [formGroupName]="i">
                    <td>
                        <input class="form-control" id="p_unit_price " type="number" class="validate" [value]="sale.p_unit_price" ng-change="tot()">
                    </td>
                    <td>
                        <input class="form-control" type="text" formControlName="p_quantity" id="p_quantity" name="p_quantity" [value]="sale.p_quantity" ng-change="tot()">
                    </td>
                    <td>
                        <div class="input-field col s2">
                            <input class="form-control" formControlName="p_description" id="p_description" type="text" class="validate" [value]="sale.p_description">
                        </div>
                    </td>
                    <td>
                        <input class="form-control" type="text" formControlName="p_subtotal" id="p_subtotal" name="p_subtotal" [value]="(sale.p_subtotal)">
                    </td>
                    <td>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="input-field col s2" style="float: right;">
            Total: {{Total}} ALL
            <input class="form-control" formControlName="total" id="total" type="text" class="validate" [value]="totale">
        </div>
        <div class="form-control" class="input-field col s2" style="float: right;">
            Amount Paid:
            <input class="form-control" formControlName="amount_paid" id="amount_paid" type="text" class="validate">
        </div>
        <div class="input-field col s2" style="float: right;">
            Subtotal:
            <input formControlName="subtotal" id="subtotal" type="text" class="validate" [value]="Total">
        </div>
    </div>
</form>

app.component.ts

tot() {
    return this.products
        .map(pro => pro.p_unit_price * pro.p_quantity)
        .reduce((a, b) => a + b, 0);
}

当我更改quantityorprice时， 中没有任何变化total。

任何人都可以提出任何想法或解释我的代码中的问题吗？

谢谢

Answer 1

添加 (change)="somefunction()" 并在您的输入中使用 [(ngModel)]="var1" 创建两种方式绑定

export class ComponentName {

var1;var2; var3;
  constructor(
  ) { }
functionName(){
// when you change your input this method is called and then manipulate your variable.
}

}