angular - 如何从 HTML 值更新 Angular 中 .ts 文件中的值？

Question

我正在使用节点中的 ngx-paypal 包在我的 Angular 应用程序中实现 Paypal 支付。在我的 TS 文件中，我可以看到产品价格的设置位置，它当前设置为硬编码值“9.99”。我想根据存储在我的 MongoDB 中的值进行此价格更改，我已经能够在我的 HTML 页面中成功显示该值，但无法将此值传递到 PayPal API 中。我刚开始使用 Angular/MEAN 堆栈，我不确定如何获取值并将其传递到 API。谢谢!

//.ts file snippit
initConfig() {
this.payPalConfig = {
  currency: 'EUR',
  clientId: 'sb',
  createOrderOnClient: data =>
    <ICreateOrderRequest>{
      intent: 'CAPTURE',
      purchase_units: [
        {
          amount: {
            currency_code: 'EUR',
            value: '9.99',
            breakdown: {
              item_total: {
                currency_code: 'EUR',
                value: '9.99'
              }
            }
          },


//html file snippit
.
.
.
 <h2 class="animated flipInX delay-2s" id="price" >{{ spotsData.price }}</h2>
.
.
.

spotsData.price 是我要传递到 .ts 文件中的值，而不是 9.99。谢谢，如果有什么需要澄清的，请告诉我!

编辑:在我获取 spotsData 的地方添加

  ngOnInit() {
    setTimeout(this.startMap, 2000);

    let id = this.route.snapshot.params['id'];
    this.selectId = id;

    this.spotsData = [];

    this._chosenSpotService.getSpots(this.selectId).subscribe((data: any) => {
      console.log(this.spotsData);
      this.spotsData = data;
    });

移动initconfig后出错

Uncaught Error: /v2/checkout/orders returned status: 400 (Corr ID: ddc5504012afb)

Answer 1

在 subscribe 之外调用 initConfig(); 将立即(同步)调用它，而不是等待 subscribe block 运行。 subscribe block 将异步运行，仅在从 API 检索数据后才运行。

您将在 subscribe block 中获取数据。所以理想情况下，您应该在将 this.spotsData 设置为 data 之后调用 initConfig。

试一试:

ngOnInit() {
  setTimeout(this.startMap, 2000);
  let id = this.route.snapshot.params['id'];
  this.selectId = id;
  this.spotsData = [];

  this._chosenSpotService.getSpots(this.selectId).subscribe((data: any) => {
    console.log(this.spotsData);
    this.spotsData = data;
    initConfig();
  });
}

然后在您的 initConfig() 方法中:

initConfig() {
  this.payPalConfig = {
    currency: 'EUR',
    clientId: 'sb',
    createOrderOnClient: data => <ICreateOrderRequest> {
        intent: 'CAPTURE',
        purchase_units: [{
          amount: {
            currency_code: 'EUR',
            value: this.spotsData.price,
            breakdown: {
              item_total: {
                currency_code: 'EUR',
                value: this.spotsData.price
              }
            }
          },
    ...
}