如何将 ngModel 值传递给 Angular 中的组件 6

Question

我正在从事 Angular6 电子商务项目并将 PayPal 支付集成到其中。我在 html 中添加了 paypal 按钮，我在 [(ngModel)] 中获取金额，但是，我必须将它传递到组件文件中，以便它可以在 paypal 配置中读取。任何更好或替代的解决方案都受到高度赞扬

以下是文件：

购物车-summary.html

<div *ngIf="cart$ | async as cart">
  <input type="number" [(ngModel)]="cart.totalPrice">
  <div id="paypal-checkout-btn"></div> 
</div>

购物车-summary.ts

totalPrice: number;

public ngAfterViewChecked(): void {
  const elementExists: boolean = !!document.getElementById('paypal-checkout-btn');
  if(elementExists && !this.addScript) {
    this.addPaypalScript().then(() => {
      paypal.Button.render({
        client: {
            sandbox: 'My sandbox API',
        },
        payment: (data, actions) => {
            return actions.payment.create({
                payment: {
                  transactions: [
                    {
                        amount: {
                            total:    this.totalPrice,
                            currency: 'USD'
                        },
                        payee:{email:'My Email ID'},
                    }
                ]
                }
            });
        },
        commit: true,
        locale: 'en_US',
        style: {
            size:   'medium', // tiny, small, medium
            color:  'blue', // orange, blue, silver
            shape:  'pill'    // pill, rect
        },
        env: 'sandbox', // Optional: specify 'sandbox' or 'production'
        onAuthorize: (data, actions) => {
            return actions.payment.execute().then((payment) => {
                console.log('payment 1 completed!');
            });
        },
        onCancel: (data) => {
            console.log('payment 1 was cancelled!');
        }
    }, '#paypal-checkout-btn');
      this.paypalLoad = false;
    });
  }
}

在这里，我在 [(ngModel)] 中获得价值 182 美元，我想将其传递到组件文件中，那么该怎么做呢？有什么建议吗？？

这里是商品总价的截图

Answer 1

代替totalPrice: number;在你的 component.ts 使用 cert = {"totalPrice": 0}; 否则在 component.html 中使用 totalPrice 而不是 cert.totalPrice.

Answer 2

由于 cart$ 是一个可观察对象，您需要订阅它以获取值或在可管道运算符中使用它。

试试这个：

cart$: Observable<any>;
totalPrice: number;

public ngAfterViewChecked(): void {
    const elementExists: boolean = !!document.getElementById('paypal-checkout-btn');

    cart$.subscribe((cart: any) => {
        this.totalPrice = cart.totalPrice;
    })

  if(elementExists && !this.addScript && this.totalPrice) {
    this.addPaypalScript().then(() => {
        paypal.Button.render({
            client: {
                sandbox: 'My sandbox API',
            },
            payment: (data, actions) => {
                return actions.payment.create({
                    payment: {
                        transactions: [
                            {
                                amount: {
                                    total: this.totalPrice,
                                    currency: 'USD'
                                },
                                payee: { email: 'My Email ID' },
                            }
                        ]
                    }
                });
            },
            commit: true,
            locale: 'en_US',
            style: {
                size: 'medium', // tiny, small, medium
                color: 'blue', // orange, blue, silver
                shape: 'pill'    // pill, rect
            },
            env: 'sandbox', // Optional: specify 'sandbox' or 'production'
            onAuthorize: (data, actions) => {
                return actions.payment.execute().then((payment) => {
                    console.log('payment 1 completed!');
                });
            },
            onCancel: (data) => {
                console.log('payment 1 was cancelled!');
            }
        }, '#paypal-checkout-btn');
        this.paypalLoad = false;
    });
}

如何将 ngModel 值传递给 Angular 中的组件 6

How to pass ngModel value to component in Angular 6

paypal

angular

angular6