首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Angular 11 +条带集成问题和错误

Angular 11 +条带集成问题和错误
EN

Stack Overflow用户
提问于 2020-12-26 03:09:52
回答 3查看 1.3K关注 0票数 1

我在使用ngx条带和Angular时遇到错误

代码语言:javascript
复制
ERROR in src/app/payment/payment.component.html:19:24 - error TS2339: Property 'elementsOptions' does not exist on type 'PaymentComponent'.
19     [elementsOptions]="elementsOptions"

  src/app/payment/payment.component.ts:12:16
    12   templateUrl: './payment.component.html',
    Error occurs in the template of component PaymentComponent.
src/app/payment/payment.component.html:15:45 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.
15 <form novalidate (ngSubmit)="createToken()" [formGroup]="stripeTest">

  src/app/payment/payment.component.ts:12:16
    12   templateUrl: './payment.component.html',
    Error occurs in the template of component PaymentComponent.
src/app/payment/payment.component.html:17:3 - error NG8001: 'ngx-stripe-card' is not a known element:
1. If 'ngx-stripe-card' is an Angular component, then verify that it is part of this module.
2. If 'ngx-stripe-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

17   <ngx-stripe-card
18     [options]="cardOptions"
19     [elementsOptions]="elementsOptions"
20   ></ngx-stripe-card>

  src/app/payment/payment.component.ts:12:[93m16
    12   templateUrl: './payment.component.html',
    Error occurs in the template of component PaymentComponent.
src/app/payment/payment.component.html:18:5 - error NG8002: Can't bind to 'options' since it isn't a known property of 'ngx-stripe-card'.
1. If 'ngx-stripe-card' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'ngx-stripe-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

18     [options]="cardOptions"

  src/app/payment/payment.component.ts:12:16
    12   templateUrl: './payment.component.html',
    Error occurs in the template of component PaymentComponent.
src/app/payment/payment.component.html:19:5 - error NG8002: Can't bind to 'elementsOptions' since it isn't a known property of 'ngx-stripe-card'.
1. If 'ngx-stripe-card' is an Angular component and it has 'elementsOptions' input, then verify that it is part of this module.  
2. If 'ngx-stripe-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

19     [elementsOptions]="elementsOptions"

  src/app/payment/payment.component.ts:12:16
    12   templateUrl: './payment.component.html',
    Error occurs in the template of component PaymentComponent.

现在我的Payment.component.html文件看起来像这样

代码语言:javascript
复制
<form novalidate (ngSubmit)="createToken()" [formGroup]="stripeTest">
  <input type="text" formControlName="name" placeholder="Jane Doe" />
  <ngx-stripe-card
    [options]="cardOptions"
    [elementsOptions]="elementsOptions"
  ></ngx-stripe-card>
  <button type="submit">CREATE TOKEN</button>
</form>

payment.component.ts文件看起来像这样

代码语言:javascript
复制
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import {
  StripeCardElementOptions,
  StripeElementsOptions,
} from '@stripe/stripe-js';
import { StripeCardComponent, StripeService } from 'ngx-stripe';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.css'],
})
export class PaymentComponent implements OnInit {
  @Input() total;
  @ViewChild(StripeCardComponent) card: StripeCardComponent;

  cardOptions: StripeCardElementOptions = {
    style: {
      base: {
        iconColor: '#111',
        color: '#111',
        fontSize: '1.2rem',
        '::placeholder': {
          color: '#111',
        },
      },
    },
  };

  elements: StripeElementsOptions = { locale: 'auto' };

  stripeTest: FormGroup;

  constructor(
    public activeModal: NgbActiveModal,
    private fb: FormBuilder,
    private stripeService: StripeService
  ) {}

  ngOnInit(): void {
    this.stripeTest = this.fb.group({
      name: ['', [Validators.required]],
    });
  }

  createToken(): void {
    const name = this.stripeTest.get('name').value;
    this.stripeService
      .createToken(this.card.element, { name })
      .subscribe((result) => {
        if (result.token) {
          // Use the token
          console.log(result.token.id);
        } else if (result.error) {
          // Error creating the token
          console.log(result.error.message);
        }
      });
  }
}

Ps:我已经在app.module.ts的imports下完成了导入。

代码语言:javascript
复制
NgxStripeModule.forRoot('pk_test_TYooMQauvdEDq54NiTphI7jx')
EN

回答 3

Stack Overflow用户

发布于 2021-02-27 09:21:35

您可以为组件添加内部模块

代码语言:javascript
复制
import { NgxStripeModule } from 'ngx-stripe'; //HERE
...

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ReactiveFormsModule,
    NgxStripeModule.forChild(), // HERE
    ComponentsModule,
    NewPaymentMethodPageRoutingModule
  ],
票数 0
EN

Stack Overflow用户

发布于 2021-07-02 00:20:07

'elementsOptions‘的属性定义缺少一行

代码语言:javascript
复制
ERROR in src/app/payment/payment.component.html:19:24 - error TS2339: Property 'elementsOptions' does not exist on type 'PaymentComponent'.
19     [elementsOptions]="elementsOptions"

您需要定义elementOptions

该行应具有名为elementOptions的元素,或更改传入位置的数据绑定

代码语言:javascript
复制
  elements: StripeElementsOptions = { locale: 'auto' }; //either change this to elementOptions
代码语言:javascript
复制
  <ngx-stripe-card
    [options]="cardOptions"
    [elementsOptions]="elementsOptions" // or change this ="options"
票数 0
EN

Stack Overflow用户

发布于 2021-08-23 07:03:32

您需要在使用elements选项的组件中添加以下代码

代码语言:javascript
复制
import { StripeElementsOptions } from '@stripe/stripe-js';
import { StripeService } from 'ngx-stripe';

constructor(private stripeService: StripeService) { }
card: any;
elementsOptions: StripeElementsOptions = {
    locale: 'en'
};

this.stripeService.elements(this.elementsOptions)
  .subscribe(elements => {
    this.elements = elements;

    // Only mount the element the first time
    if (!this.card) {
      this.card = this.elements.create('card', {
        style: {
          base: {
            iconColor: '#666EE8',
            color: '#31325F',
            lineHeight: '50px',
            fontWeight: 500,
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSize: '16px',
            '::placeholder': {
              color: 'rgb(107, 105, 105)',
              
            }
          }
        }
      });
      this.card.mount('#card-element');
    }
  });
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65450994

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档