[英]How to pass ngModel value to component in Angular 6
我正在研究Angular 6電子商務項目並將PayPal付款整合到其中。 我在html中添加了paypal按鈕,我在[(ngModel)]中獲得金額,但是,我要在組件文件中傳遞它,以便可以在paypal配置中讀取它。 任何更好或替代的解決方案都受到高度贊揚
以下是文件:
<div *ngIf="cart$ | async as cart">
<input type="number" [(ngModel)]="cart.totalPrice">
<div id="paypal-checkout-btn"></div>
</div>
totalPrice: number;
public ngAfterViewChecked(): void {
const elementExists: boolean = !!document.getElementById('paypal-checkout-btn');
if(elementExists && !this.addScript) {
this.addPaypalScript().then(() => {
paypal.Button.render({
client: {
sandbox: 'My sandbox API',
},
payment: (data, actions) => {
return actions.payment.create({
payment: {
transactions: [
{
amount: {
total: this.totalPrice,
currency: 'USD'
},
payee:{email:'My Email ID'},
}
]
}
});
},
commit: true,
locale: 'en_US',
style: {
size: 'medium', // tiny, small, medium
color: 'blue', // orange, blue, silver
shape: 'pill' // pill, rect
},
env: 'sandbox', // Optional: specify 'sandbox' or 'production'
onAuthorize: (data, actions) => {
return actions.payment.execute().then((payment) => {
console.log('payment 1 completed!');
});
},
onCancel: (data) => {
console.log('payment 1 was cancelled!');
}
}, '#paypal-checkout-btn');
this.paypalLoad = false;
});
}
}
我在[(ngModel)]中獲得的值為$ 182,我想在組件文件中傳遞它,那么怎么做呢? 有什么建議么??
而不是totalPrice:number; 在你的component.ts中使用cert = {“totalPrice”:0}; 否則,在component.html中使用totalPrice而不是cert.totalPrice。
由於cart$
是一個可觀察的,您將需要訂閱它以獲取值或在可管道運算符中使用它。
嘗試這個:
cart$: Observable<any>;
totalPrice: number;
public ngAfterViewChecked(): void {
const elementExists: boolean = !!document.getElementById('paypal-checkout-btn');
cart$.subscribe((cart: any) => {
this.totalPrice = cart.totalPrice;
})
if(elementExists && !this.addScript && this.totalPrice) {
this.addPaypalScript().then(() => {
paypal.Button.render({
client: {
sandbox: 'My sandbox API',
},
payment: (data, actions) => {
return actions.payment.create({
payment: {
transactions: [
{
amount: {
total: this.totalPrice,
currency: 'USD'
},
payee: { email: 'My Email ID' },
}
]
}
});
},
commit: true,
locale: 'en_US',
style: {
size: 'medium', // tiny, small, medium
color: 'blue', // orange, blue, silver
shape: 'pill' // pill, rect
},
env: 'sandbox', // Optional: specify 'sandbox' or 'production'
onAuthorize: (data, actions) => {
return actions.payment.execute().then((payment) => {
console.log('payment 1 completed!');
});
},
onCancel: (data) => {
console.log('payment 1 was cancelled!');
}
}, '#paypal-checkout-btn');
this.paypalLoad = false;
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.