创建同一组件的另一个实例,而不是更新现有实例

我有一个cart组件,它从firebase获取数据并在前端数据上呈现这些数据。我在该组件上有一些按钮,可以更改firebase中的数量(删除一个,添加一个)。每当用户单击该按钮时,数量会发生变化,但角度会发生变化,而不是更新现有的组件,而是创建一个新的相同组件,该组件具有更新的数量,而上一个组件将保持不变。(如图所示)。我不确定出了什么问题,因为这两个按钮在产品组件(另一个用于更改数量的组件)上工作正常。

我的代码:-

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

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