條紋角度錯誤：未被捕獲（承諾）：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 
})