Angular создает другой экземпляр того же компонента вместо обновления существующего

Question

У меня есть компонент корзины, который получает данные из firebase и отображает эти данные в данных внешнего интерфейса. У меня есть несколько кнопок на том компоненте, который изменяет количество в базе данных (Удалить одну, Добавить одну). Всякий раз, когда пользователь нажимает на эту кнопку, количество меняется, но угловое вместо обновления существующего компонента создает новый такой же компонент с обновленным количеством, а предыдущий остается там. (как показано на рисунке). Я не уверен, что происходит не так, как эти две кнопки работают нормально на компоненте продукта (еще один компонент для изменения количества). У меня есть 3 компонента в корзине, при нажатии удалить один, они снова отображаются.

Мой код: -

cartComponent.ts

export class CartComponent{

cart$ = [];
totalPrice$: number = 0;

constructor( private cart: CartService) {
    this.getCartData().then( data => data );
}

async getCartData() {

    if( this.cart$.length > 0 ){
        for( let i=0; i<this.cart$.length; i++ ){
            let item  = this.cart$[i];
            console.log( item );
            for(let key in this.cart$[i]){
                console.log( item[key]["product"]["quantity"] );
                if( item[key]["product"]["quantity"] === 0 ){
                    this.cart$.splice( i, 1 );
                }
            }
        }
    }

    let cartId = await this.cart.getOrCreateCartId();
    let cart = await firebase.database().ref(  '/cart/' + cartId + '/items/');
    cart.on( 'value', (snapshot) => {
        let items = snapshot.val();
        for( let key in items ){
            this.cart$.push( items[key ]);
            this.totalPrice$ += parseFloat( items[key]["product"]["price"] ) *  parseFloat( items[key]["product"]["quantity"] );
        }
    });
}

removeFromCart( product ){
    this.cart.removeFromCart( product );
}

addToCart( product ){
    this.cart.addToCart( product );
}
}

cartComponent.html

<div id="center">
    <mat-spinner *ngIf="cart$.length === 0; content"></mat-spinner>
</div>
<mat-list role="list" *ngFor="let item of cart$">
    <mat-list-item role="listitem">
        <p class="title-width">{{ item.product.title }}</p>
        <p class="left-margin">Price:</p>&nbsp;<p matBadge="{{ item.product.quantity * item.product.price }}" matBadgeOverlap="false"></p>
        <p class="left-margin">Quantity:</p>&nbsp;<p matBadge="{{ item.product.quantity }}" matBadgeColor="accent" matBadgeOverlap="false"></p>
        <p class="left-margin"><button mat-raised-button style="margin-left: 5px;" (click)="removeFromCart( item.product )" color="warn">Remove one</button></p>
        <p class="left-margin"><button mat-raised-button class="button-padding-left" (click)="addToCart( item.product )" color="primary">Add one</button></p>
        <p class="left-margin"><button mat-raised-button class="button-padding-left" color="warn">Remove all</button></p>
        <mat-divider></mat-divider>
    </mat-list-item>
</mat-list>
<div class="container margin">
    <h4>Total Price: {{ totalPrice$ }}</h4>
    <button mat-raised-button color="primary" color="accent">Checkout</button>
</div>

Answer 1

Мне удалось решить эту проблему, снова установив массив cart в пустой массив. Я не уверен, что это правильный способ сделать это. Но если я делаю это неправильно, пожалуйста, дайте мне знать в комментариях. Так я исправил проблему.

removeFromCart( product ){
        this.cart$ = [];
        this.totalPrice$ = 0;
        this.cart.removeFromCart( product );
    }

    addToCart( product ){
        this.cart$ = [];
        this.totalPrice$ = 0;
        this.cart.addToCart( product );
    }