从 ngx-paypal 中的可观察变量传递总值

Question

我正在使用 ngx-paypal 在页面中引入一个 paypal 支付按钮。我有这样表示的购物车对象：

  cart$: Observable<Cart>;

作为局部变量。将总数从 cart$ (.total) 传递到标准配置的推荐方法是什么 ngx-paypal:

private initConfig(): void {
    this.payPalConfig = {
      currency: 'EUR',
      clientId: 'AXVj0j1Qk2K6OD2ai7TezGja3QxzK-lAFlTrVT5EiWHL-uFbu3Ce2d2Tg9Jo-13YpiJIzGgNIRkz9lKs',
      createOrderOnClient: (data) => <ICreateOrderRequest> {
        intent: 'CAPTURE',
        purchase_units: [
          {
            amount: {
              currency_code: 'EUR',
              value: this.cart$.totalPriceWithTax.value,
              breakdown: {
                item_total: {
                  currency_code: 'EUR',
                  value: '9.99'
                }
              }
            },
            items: [
              {
                name: 'Enterprise Subscription',
                quantity: '1',
                category: 'DIGITAL_GOODS',
                unit_amount: {
                  currency_code: 'EUR'

如果我在initConfig中订阅cart$并在订阅中初始化this.payPalConfig可以吗？

Answer 1

如果您已经将 cart$ 作为一个 observable，并且 payPalConfig 的值取决于 cart$ 的排放，那么将配置定义为一个派生的 observable 可能是最简单的来自 cart$，像这样：

  public paypalConfig$ = this.cart$.pipe(
    map(cart => this.buildPaypalConfig(cart.items))
  );

您将创建一个 buildPaypalConfig 方法来构建配置对象，来自 cart$ 发射。然后，在模板中，您可以将 paypalConfig$ | async 传递给 ngx-paypal 组件，如下所示：

<ngx-paypal [config]="paypalConfig$ | async"></ngx-paypal>

这确保 ngx-paypal 组件始终具有反映 cart$.

的最新更改的配置

这是一个 StackBlitz 示例。

从 ngx-paypal 中的可观察变量传递总值

Pass total value from observable variable in ngx-paypal

paypal

rxjs

angular