我正在嘗試更新輸出函式中的變數，并且僅在 ts 檔案中更新它，而不是在 HTML 中，我在下面添加代碼。
檔案
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnChanges {
success: boolean = false;
constructor(private _cdr: ChangeDetectorRef) {}
ngOnInit() {
this._cdr.detectChanges();
}
validatePayment(response) {
this._cdr.detectChanges()
this.success = true;
console.log('updatePaymentOrder', this.success);
}
ngOnChanges(changes: SimpleChanges) {
console.log("Changes detected");
if(changes.success) {
console.log('changes.success', changes.success.currentValue);
}
}
}
代碼
<p>{{success}}</p>
<app-razorpay (paymentResponse)="validatePayment($event)"></app-razorpay>
razorpay.ts
declare var Razorpay: any;
@Component({
selector: 'app-razorpay',
template: ''
})
export class RazorpayComponent implements OnInit {
@Output() paymentResponse = new EventEmitter<any>();
constructor() { }
ngOnInit(): void {
this.showRazorPayWidget()
}
showRazorPayWidget() {
var options = {
key: 'KEY',
amount: "10000",
currency: "INR",
name: "COMPANY",
handler: function (response: any) {
this.paymentResponse.emit(response);
}.bind(this),
};
var rzp1 = new Razorpay(options);
rzp1.on("payment.failed", (response: any) => {
console.log('error')
});
rzp1.open();
}
}
輸出：
false
預期輸出：
成功值應該改變。
ts 檔案中的成功值正在更改，但在 html 檔案中沒有更改....
uj5u.com熱心網友回復：
我只是試圖重現，但我無法重現。您可以添加更多代碼嗎？
堆疊閃電戰游樂場
您可以將其包裝在ngZone Api
handler: function (response: any) {
console.log(this._ngZone.isInAngularZone());
this._ngZone.run(() => { this.paymentResponse.emit(response); });
}.bind(this),
替代方式，您可以像這樣向 razorpay 成功/取消/錯誤添加更多偵聽器，而不是從處理程式中執行
rzp1.on("payment.success", (response: any) => {
console.log('success', response)
this.paymentResponse.emit(response);
});
rzp1.on("payment.cancel", (response: any) => {
console.log('cancel', response)
this.paymentResponse.emit(response);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/516798.html
標籤：有角度的剃刀支付
上一篇：遞回函式回傳奇怪的輸出？
下一篇：Angular14：錯誤“ViewUsersComponent”類的引數“userService”沒有合適的注入令牌