Question

我正在构建Angular 6应用并试图了解NGXS（3.1.4）。

我已经设法实现@Actions来添加/删除商店中的购物车商品；那些确实有效。

我仍在尝试执行以下操作：

计算cartItem的总数并将其显示为值有角度的html组件
清除购物车中的所有cartItem

已解决

@Action(EmptyCart) emptyCart(ctx: StateContext<CartStateModel>, action: EmptyCart) { 
const state = ctx.getState(); 
const current = { cartItems: [] }; 
ctx.setState({ ...state, ...current }); 
}

如果ID已存在，则仅更新cartItems中CartItem的数量
通过计算每个cartItems价格*数量并将其添加到运行总额中以显示在html角组件中，来计算购物车的总金额

我很高兴我问了多个问题，但它们与同一个问题有关。

如果有视频或链接涵盖此类问题，那就太好了。我尝试了google / youtube搜索，并查看了NGXS的github文档。

以下是我正在使用的：

export interface CartItem {
  tempID: number;
  id: number;
  name: string;
  price: number;
  quantity: number;

}

export class CartStateModel {
    cartItems: CartItem[];
}

@State<CartStateModel>({
  name: 'cartItems',
  defaults: {
    cartItems: []
  }
})

感谢您的反馈意见：-）

Answer 1

这是我正在使用的一种方法：

function emptyCartState() {
  return {
    cartItems: [],
  }
}

@State<CartStateModel>({
  name: 'cartItems',
  defaults: emptyCartState(),
})

..
..
..
Action(EmptyCart)
emptyCart(ctx: StateContext<CartStateModel>, action: EmptyCart) { 
  return of(ctx.setState(emptyCartState()));
}

NGXS 3.1.4商店计算/操作

1 个答案: