angular - Typescript で「total」を計算し、「total=quantity*price」を更新します

Question

私は次のようなものを計算したいと思います:そして、いつまたは変更total= quantity*priceを更新します。totalquantityprice

テンプレート出力スナップショット

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

quantityまたはを変更してもprice、 では何も変化しませんtotal。

誰かがアイデアを提案したり、私のコードの問題を説明したりできますか?

ありがとうございました