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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何从HTML值更新Angular .ts文件中的值?相关的知识,希望对你有一定的参考价值。

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

答案

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

以上是关于如何从HTML值更新Angular .ts文件中的值?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 2+ 中将值从 ts 文件传递​​到同一组件中的 scss 文件?

如何从 Angular 项目中使用 javascript 导出独立的 html/css?

Angular项目从项目输出文件夹中的.ts编译附加的.js文件

如何在component.ts,angular2中将数据从一个函数传递到另一个函数

Angular:如何在打字稿文件中使用父组件的输入值

如何从Angular中的另一个函数调用一个函数?