条纹角度错误：未被捕获（承诺）：TypeError：无法读取未定义的属性'stripeService'

Question

我目前正在尝试实现条纹到我的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不defin在这里编辑，但我不明白我可以如何解决这个问题。

有一个美好的一天:)

Answer 1

使用方向的功能，如果你想使用外this。用function声明的函数创建一个新的this，这里未定义。

运行这个例子，看看发生了什么事情：

class X { 
    constructor(x) { 
    this.x = x; 
    } 
    a() { 
    (function() { 
     console.log(this.x); 
    })(); 
    } 
    b() { 
    (() => { 
     console.log(this.x); 
    })(); 
    } 
} 

let x = new X(10); 
x.b(); 
x.a(); 

这里b()方法内部函数正确使用外this但a()方法，创建了自己的this这是不确定的，并导致功能错误：

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

（未测试）

Answer 2

当你定义一个函数，匿名或用它创建一个新的范围，this关键字指向新创建的范围function关键字命名功能。你想要的是引用addCard功能的范围

有几个方法可以做到这一点：

首先，最好的方法是使用不创建一个新的范围ES6箭头功能 例如：

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

二选择是参考存储的addCard范围：

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