TypeError:无法在Object.closed处读取未定义的属性“processPaymentFS”

时间:2018-05-19 12:18:13

标签: angular typescript angular-cli angular5 angular-services

所以我有一个购物车组件可以让客户结账。我正在使用Angular CLI - Stripe Checkout - Firebase Firestore。

我在这一行收到错误:this.paymentSvc.processPaymentFS(this.key, dataObj);在我的组件ngOnInit

some-app.component.ts的代码

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Observable } from 'rxjs/Observable';

import { environment } from '../../environments/environment';
import { PaymentModule } from './customer-cart.module';
import { PaymentService } from '../services/payment.service';
import { Order } from '../models/order';
import { User } from '../models/user';


@Component({
  selector: 'app-some-app',
  templateUrl: './some-app.component.html',
  styleUrls: ['./some-app.component.css'],
})
export class SomeAppComponent implements OnInit {

  quantity = 3;
  fee = 40;
  amount = 500;
  totalAmount: number = this.fee + this.amount; // 500 == 5.00
  handler: any; 

  public order: Observable<Order>;
  key: string;

  currentUser: User;
  loggedIn:boolean;

  angForm: FormGroup;

  constructor(private paymentSvc: PaymentService, private authService: AuthService) {
   }

  ngOnInit() { 
    this.authService.getCurrentUser().subscribe(user => {
      this.currentUser = user;
      this.key = this.currentUser.$key;
    })
    this.handler = StripeCheckout.configure({
      opened: function() {
        console.log('payment form opened');
      },
      closed: function() {
        console.log('payment form closed');
        const dataObj = {
          quantity: this.quantity,
          amount: this.totalAmount * 100,
          date: Date.now(),
          status: 'active' // history
        };
        console.log("data obj ok");
        this.paymentSvc.processPaymentFS(this.key, dataObj);
        console.log('payment successful');
      }
    });
  }


  handlePayment() {
    this.handler.open({
        name: 'Some App',
        description: 'Checkout out the items in your cart',
        amount: this.totalAmount * 100
     });

}

我尝试访问的服务功能代码(payment.service.ts):

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreDocument  } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
import { Order } from '../models/order';

@Injectable()
export class PaymentService {

  userId: string;

  private orderDoc: AngularFirestoreDocument<Order>;
  order: Observable<Order>

  constructor(private afAuth: AngularFireAuth, private afS: AngularFirestore) {
    this.afAuth.authState.subscribe((auth) => {
      if (auth) this.userId = auth.uid
    });
   }

  processPaymentFS(id, data) {
    console.log('in process payment --payment service')
    this.orderDoc = this.afS.doc<Order>('orders/'+id)
    console.log('doc path ok --payment service')
    this.orderDoc.set(data)
    console.log('order doc set --payment service')
  }

}

最后,这是模型(order.ts):

export class Order {
    $key: string;
    quantity: number;
    amount: number;
    date: string;  
    status: string;
}

其他重要提示:PaymentService

中声明了app.module.ts

我必须编辑一些东西,所以如果我删除了应该在这里的任何内容,请告诉我。我会检查我的代码是否在那里并更新。

0 个答案:

没有答案