stripe angular错误:Uncaught(在promise中):TypeError:无法读取未定义的属性'stripeService'

我目前正在尝试实现条纹到我的angular4 nodejs应用程序,但我有点卡住了,当我试图通过我的服务发送卡令牌到我的服务器处理与条带相关的请求。 这是我得到的代码:

stripe.component.html:

<form role="form" id="payment-form"> <div id="card-element"></div> <div id="card-errors" role="alert"></div> <button type="submit" (click)="addCard()">Submit Payment</button> </form> 

stripe.component.ts:

 import {Component, OnInit} from "@angular/core"; import {WindowRef} from "../social/windowRef"; import {StripeService} from "./stripe.service"; @Component({ selector: "app-stripe", templateUrl: './stripe.component.html', styleUrls: ['./stripe.component.css'] }) export class StripeComponent implements OnInit { elements: any; stripe: any; style: any; card: any; constructor(private stripeService: StripeService){} ngOnInit() { this.initCardElement(); } initCardElement(){ this.stripe = WindowRef.get().Stripe("my-key"); this.elements = this.stripe.elements(); this.style = { base: { color: '#32325d', lineHeight: '24px', fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSmoothing: 'antialiased', fontSize: '16px', '::placeholder': { color: '#aab7c4' } }, invalid: { color: '#fa755a', iconColor: '#fa755a' } }; this.card = this.elements.create('card', {style: this.style}); this.card.mount('#card-element'); } addCard() { this.stripe.createToken(this.card) .then(function (result) { if (result.error) { var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; } else { console.log(result.token); this.stripeService.addCard(result.token) .subscribe((response: Response) => { console.log(response); } ); } }); } } 

我设法得到条纹的卡令牌,但是当我试图调用我的stripeService我得到这个错误:

 Error: Uncaught (in promise): TypeError: Cannot read property 'stripeService' of undefined 

我明白,这个this.stripeService没有在这里定义,但我不明白我怎么能解决这个问题。

祝你有美好的一天 :)

使用箭头function,如果你想使用外部this 。 用函数声明的function创build一个新的,这里是未定义的。

运行这个例子来看看发生了什么:

 class X { constructor(x) { this.x = x; } a() { (function () { console.log(this.x); })(); } b() { (() => { console.log(this.x); })(); } } let x = new X(10); xb(); xa(); 

这里的b()方法中的函数正确地使用了外部的this但是a()方法有一个函数,它创build了它自己的未定义的函数,并导致错误:

 TypeError: Cannot read property 'x' of undefined 

在你的例子中,你可以改变这个:

 addCard() { this.stripe.createToken(this.card) .then(function (result) { if (result.error) { var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; } else { console.log(result.token); this.stripeService.addCard(result.token) .subscribe((response: Response) => { console.log(response); } ); } }); } 

对此:

 addCard() { this.stripe.createToken(this.card) .then((result) => { if (result.error) { var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; } else { console.log(result.token); this.stripeService.addCard(result.token) .subscribe((response: Response) => { console.log(response); } ); } }); } 

(未testing)

当你定义一个匿名函数或者用function关键字命名的function时会创build一个新的作用域, this关键字指向新创build函数的作用域。 你想要的是引用addCard函数的作用域

有几种方法可以做到这一点:

首先 ,最好的方法是使用不创build新范围的ES6箭头函数,例如:

 this.stripe.createToken(this.card) .then((result) => { console.log(this.stripeService); // it will be defined here }) 

第二个选项是存储对addCard范围的addCard

 let that = this; this.stripe.createToken(this.card) .then((result) => { console.log(that.stripeService); // it will be defined here })