Общие итоги не обновляются при удалении

Question

Я использую геттер для обновления общих итогов. Когда я нажимаю кнопку deleteItem, общая сумма не обновляется, а в ячейке таблицы отображается та же общая сумма, что и раньше, даже если элементы были удалены. Как это исправить?

В HTML:

<form name="yourForm" [formGroup]="yourForm">
<table>
<tr *ngFor="let item of items; let i = index">
<td><td></td>
<button type="button" (click)="deleteItem(i)" class="deletebtn">X</button></td>
<td>{{item.quantity}} </td>
<td>{{item.product_price }} </td>
<td>{{item.quantity * item.product_price }}</td>
</tr>
<tr><td></td><td></td><td><b>Grand Total</b> </td><td><b>{{grandTotal }}</b></td></tr>
</table>

В компоненте:

totals = [];
get grandTotal() {

let i;
let sub_total = 0;
let grand_total = 0;
if  (this.isSubmitted == true) {
 if (typeof this.product_price  !== "undefined" && typeof this.quantity  !== "undefined") {
                                sub_total = this.product_price * this.quantity;
                                this.totals.push(sub_total);
                        }
                }
                          
                                
                for (i = 0; i < this.totals.length; i++) {
                        grand_total += this.totals[i];
                }
        this.isSubmitted = false;
        return grand_total;
}

deleteItem(i){
this.totals = [];
this.isSubmitted = true;
this.grandTotal;
this.items.splice(i,1);
this.setStorageItems(this.items);

}

Answer 1

this.totals Вам необходимо инициализировать [], прежде чем вставлять в него значения.