角度数组在删除后更新不正确

Question

我已经创建了一个购物车，所有http操作都可以工作。但是，我遇到的问题是，当我从购物车中删除某些内容时，显示的数据仅在刷新页面或删除其他项目后更新。

购物车服务.ts

public getCart(): Observable<CartRequest> {
return this.http.get<CartRequest>(environment.apiUrl + Api.v1.cart.cart);
}
deleteFromCart(cartListItem: CartListItem) {
this.http.delete(url + '/' + cartListItem.cartItemId)
.subscribe(data => {
console.log('Deleted item ', cartListItem.cartItemId);
}, error => {
console.log(error);
});
}

cart-list.component.ts

public generateCart() {
// refresh the cart if fulled
if (this.cartItems.length > 0) {
this.cartItems = [];
console.log(this.cartItems);
}
this.shoppingCartService.getCart().subscribe((data: CartRequest) => {
for (const a of data.cartItems) {
const cartListItem: CartListItem = {
cartItemId: a.cartItemId,
image: '..',
name: '..',
itemNumber: '123 456 789',
orderNumber: '265 715 365',
quantity: a.quantity,
units: ['Stk', 'Kg', 'mm'],
total: '150,00'
};
this.cartItems.push(cartListItem);
}
console.log(this.cartItems);
});
}

cart-list-item.component.ts

deleteFromCart() {
this.shoppingCartService.deleteFromCart(this.cartItem);
// refresh the cart
this.cartList.generateCart();
}

Answer 1

你知道API服务是异步的。但是，您尝试在开始通话后直接刷新购物车。请在回调中刷新。

deleteFromCart(cartListItem: CartListItem) {
this.http.delete(environment.apiUrl + Api.v1.cart.cart + '/' + 
cartListItem.cartItemId).subscribe(data => {
// REFRESH HERE
}, error => { console.log(error); });

或者，您可以在前端乐观地删除您的项目。但在这种情况下，您需要直接修改数据持有人(切片(

deleteFromCart() {
this.shoppingCartService.deleteFromCart(this.cartItem);
// optimistic deletion
this.cartItems.slice(/* respective arguments */);
}