将变量传递给贝宝结帐中的项目

Question

我几乎在一周前就开始使用 Angular。为了让事情变得简单，我正在尝试实施贝宝结帐。

只要我只通过总金额，结帐就可以正常工作。但我想将几个项目传递给贝宝。

我是这样尝试的：

    import {
      Component,
      OnInit,
      ViewChild,
      Input,
      ElementRef,
      Output,
      EventEmitter
    } from "@angular/core";

    declare var paypal;

    @Component({
      selector: "app-payme",
      templateUrl: "./payme.component.html",
      styleUrls: ["./payme.component.scss"]
    })
    export class PaymeComponent implements OnInit {
      @ViewChild("paypal", { static: true }) paypalElement: ElementRef;
      @Input() total: number;
      @Input() cart: [];

      //payCart: [];

      @Output() isPaidFor: EventEmitter<boolean> = new EventEmitter();

      paidFor = false;

      constructor() {}

      cartInConsole() {
        console.log("PayPalTotal", this.total);
      }

      declareItem() {
        let paypalItem = [];
        for (let i =0 ; i< this.cart.length; i++) {
            let currency = "EUR";
            let quantity = this.cart[i].selectedSize;
            let name = this.cart[i].name;
            let amount = this.cart[i].selectedPrice;
            console.log("DeclareFunction rennt");
            //let pushItem = {"quantity": quantity};  
            paypalItem.push({"unit_amount": {"currency_code": "EUR","value": currency, "amount": amount},"quantity": quantity,"name": name});
           console.log("Declare", paypalItem) 
            return paypalItem
          }

         console.log("StackOverFow", paypalItem )
      };


      ngOnInit() {
        console.log("PayPalCart", this.cart);
        this.declareItem();
        paypal
          .Buttons({
            createOrder: (data, actions) => {
              return actions.order.create(

                {
              purchase_units: [{
                amount: {
                    currency_code: 'EUR',
                    value: this.total,

                    }
                },
              items: this.paypalItem
            }]
            },
            onApprove: async (data, actions) => {
              const order = await actions.order.capture();
              this.paidFor = true;
              this.isPaidFor.emit(this.paidFor);
              console.log("Order", order);
            }
          })
          .render(this.paypalElement.nativeElement);
      }

    }

但我得到的回应是：未定义项目。

我的 paypalItem 的 console.log 看起来不错 - 它似乎是一个对象数组，就像它应该的那样。

但是我如何让它将该对象传递给项目或项目？

顺便问一下：是哪一个？物品或物品？几个小时的谷歌搜索得到所有不同的答案，让你怀疑任何事情:-)

提前非常感谢！

更新

我尝试声明 paypalItem，然后在 declareItem 函数中进行设置。不幸的是，结果相同...

现在的代码如下所示：

 import {
  Component,
  OnInit,
  ViewChild,
  Input,
  ElementRef,
  Output,
  EventEmitter
} from "@angular/core";

declare var paypal;

@Component({
  selector: "app-payme",
  templateUrl: "./payme.component.html",
  styleUrls: ["./payme.component.scss"]
})
export class PaymeComponent implements OnInit {
  @ViewChild("paypal", { static: true }) paypalElement: ElementRef;
  @Input() total: number;
  @Input() cart: [];
paypalItem: [];
  //payCart: [];

  @Output() isPaidFor: EventEmitter<boolean> = new EventEmitter();

  paidFor = false;

  constructor() {}

  cartInConsole() {
    console.log("PayPalTotal", this.total);
  }

  declareItem() {
    let paypalItem = [];
    for (let i =0 ; i< this.cart.length; i++) {
        let currency = "EUR";
        let quantity = this.cart[i].selectedSize;
        let name = this.cart[i].name;
        let amount = this.cart[i].selectedPrice;
        console.log("DeclareFunction rennt");
        //let pushItem = {"quantity": quantity};  
        paypalItem.push({"unit_amount": {"currency_code": "EUR","value": currency, "amount": amount},"quantity": quantity,"name": name});
       console.log("Declare", paypalItem) 
        this.paypalItem = paypalItem;
      }

     console.log("StackOverFow", paypalItem )
  };


  ngOnInit() {
    console.log("PayPalCart", this.cart);
    this.declareItem();
    paypal
      .Buttons({
        createOrder: (data, actions) => {
          return actions.order.create(

            {
          purchase_units: [{
            amount: {
                currency_code: 'EUR',
                value: this.total,

                }
            },
          items: this.paypalItem
        }]
        },
        onApprove: async (data, actions) => {
          const order = await actions.order.capture();
          this.paidFor = true;
          this.isPaidFor.emit(this.paidFor);
          console.log("Order", order);
        }
      })
      .render(this.paypalElement.nativeElement);
  }

}

还有其他想法吗？

另一个更新：

完整代码在codesandbox

Answer 1

在类中没有看到声明为 paypalItem 的变量。声明一个名为paypalItem 的变量，然后在方法declareItem() 中将paypalItem 数组分配给您之前声明的类级别paypalItem。

declareItem() {
...
this.paypalItem = paypalItem;
}

更新

这是您的模型绑定错误。当您添加项目时，Paypal 创建订单需要具有不同所需属性的模型。我在代码中添加了一个示例模型。您可以将您的值映射到您的模型并在那里替换它。

为了进行测试，请在沙箱中将此代码 sn-p 替换为您的代码。可以正常工作。

参考这个。 api documentation for create (items array)

 paypal
      .Buttons({
        createOrder: (data, actions) => {
          // This function sets up the details of the transaction, including the amount and line item details.
          return actions.order.create({
            intent: "CAPTURE",
            purchase_units: [
              {
                amount: {
                  currency_code: "EUR",
                  value: "0.02",
                  breakdown: {
                    item_total: {
                      currency_code: "EUR",
                      value: "0.02"
                    }
                  }
                },
                items: [
                  {
                    name: "item1",
                    unit_amount: {
                      currency_code: "EUR",
                      value: "0.01"
                    },
                    quantity: "1"
                  },
                  {
                    name: "item2",
                    unit_amount: {
                      currency_code: "EUR",
                      value: "0.01"
                    },
                    quantity: "1"
                  }
                ]
              }
            ]
          });
        },
        onApprove: function(data, actions) {
          // This function captures the funds from the transaction.
          return actions.order.capture().then(function(details) {
            // This function shows a transaction success message to your buyer.
            alert("Transaction completed by " + details.payer.name.given_name);
          });
        }
      })
      .render(this.paypalElement.nativeElement);