angular的js函数中的api调用答案

【问题标题】：Api call in js function of angularangular的js函数中的api调用
【发布时间】：2022-01-26 13:44:12
【问题描述】：

我需要在下面的 javascript 函数中调用 api，但它没有在 javascript 函数中使用注入服务 (subService) 或定义的变量 (formData) 并得到 undefined addSub 的错误。 javascript函数中如何调用api？

请帮助和指导。

HTML

<button class="btn" (click)="initializePayment(item.id,item.price)">click here</button>

 formData: any;
  loading: boolean = false;

  constructor(
    private subService: SubService,
    ) { }

    initializePayment(sid,amount: number) {
        this.loading = true;
        const paymentHandler = (<any>window).StripeCheckout.configure({
          key: this.stripeKey,
          locale: 'auto',
          token: function (stripeToken: any) {
            console.log({stripeToken});
            const sToken = stripeToken.id;
            this.formData = new FormData();
            this.formData.append('id', this.id);
            this.formData.append('s_id', sid);
            this.formData.append('stripeToken', sToken);
    
            this.subService.addSub(this.formData).subscribe(
              (response) => {
                this.loading = false;
                console.log('resp: ', response);
                if (response['status'] === true) {
                  this.notifyService.showSuccess(
                    'success!!',''
                  );
                  //window.location.reload();
                  this.router.navigate(['/user']);
                } else {
                  this.notifyService.showError(
                    'Something went wrong. Please try later!!!',''
                  );
                }
              },
              (error) => {
                this.notifyService.showError(
                  error,
                  'Oooops Something went wrong. Please try later!!'
                );
                this.loading = false;
              }
            );
            //alert('Stripe token generated!');
          }
        });
      
        paymentHandler.open({
          name: 'test',
          description: 'Upgrade',
          amount: amount * 100
        });
      }

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

替换分配给token 的function 以使用箭头函数。

token: (stripeToken: any) => {
            console.log({stripeToken});
            const sToken = stripeToken.id;
            this.formData = new FormData();
            this.formData.append('id', this.id);
            this.formData.append('s_id', sid);
            this.formData.append('stripeToken', sToken);
    
            this.subService.addSub(this.formData).subscribe(
              (response) => {
                this.loading = false;
                console.log('resp: ', response);
                if (response['status'] === true) {
                  this.notifyService.showSuccess(
                    'success!!',''
                  );
                  //window.location.reload();
                  this.router.navigate(['/user']);
                } else {
                  this.notifyService.showError(
                    'Something went wrong. Please try later!!!',''
                  );
                }
              },
              (error) => {
                this.notifyService.showError(
                  error,
                  'Oooops Something went wrong. Please try later!!'
                );
                this.loading = false;
              }
            );
            //alert('Stripe token generated!');
          }
        })

【讨论】：

非常感谢。我想知道我应该在函数内部进行哪些更改，但您的更改使它更容易。吸取教训。谢谢。