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

Question

我正在使用来自节点的ngx-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>
.
.
.

spotData.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

在initConfig();外部直接调用subscribe将立即（同步）调用它，而不是等待subscribe块运行。仅从API检索数据后，subscribe块才会异步运行。

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

尝试一下：

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
              }
            }
          },
    ...
}