Question

我有一个购物车组件，该组件从firebase获取数据并将其呈现在前端数据上。我在该组件上有一些按钮，这些按钮会更改firebase中的数量（删除一个，添加一个）。每当用户单击该按钮时，数量都会改变，但是数量会成角度，而不是更新现有的组件，而是使用更新后的数量创建一个新的相同组件，而上一个组件会停留在该组件上。（如图片所示）。我不确定这是怎么回事，因为这两个按钮在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 );
    }

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

1 个答案: