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

Question

我有一个购物车组件，它从 firebase 获取数据并将该数据呈现在前端数据上。我在该组件上有一些按钮可以更改 firebase 中的数量（删除一个，添加一个）。每当用户单击该按钮时，数量就会发生变化，但 angular 不会更新现有组件，而是创建一个新的具有更新数量的相同组件，而前一个组件会保留在那里。（如图所示）。我不确定出了什么问题，因为这两个按钮在 Product 组件（另一个用于更改数量的组件）上工作正常。我的购物车中有 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

我能够通过再次将购物车数组设置为空数组来解决此问题。我不确定这是否是正确的方法。但如果我做错了，请在评论中告诉我。我就是这样解决问题的。

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

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

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

Angular creating another instance of same component instead of updating the existing one

javascript

typescript

angular

angular6

angular-material-6