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

Question

我正在使用来自节点的ngx-PayPal包在我的Ang应用程序中实现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。谢谢，如果有什么需要澄清的，请告诉我！

编辑：添加了我获取点数据的位置

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;
});

移动初始化配置后出错

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

Answer 1

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

您将在subscribe块内获取数据。因此，理想情况下，您应该在将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
}
}
},
...
}