我在使用ngx条带和Angular时遇到错误
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文件看起来像这样
<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文件看起来像这样
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下完成了导入。
NgxStripeModule.forRoot('pk_test_TYooMQauvdEDq54NiTphI7jx')发布于 2021-02-27 09:21:35
您可以为组件添加内部模块
import { NgxStripeModule } from 'ngx-stripe'; //HERE
...
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ReactiveFormsModule,
NgxStripeModule.forChild(), // HERE
ComponentsModule,
NewPaymentMethodPageRoutingModule
],发布于 2021-07-02 00:20:07
'elementsOptions‘的属性定义缺少一行
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的元素,或更改传入位置的数据绑定
elements: StripeElementsOptions = { locale: 'auto' }; //either change this to elementOptions <ngx-stripe-card
[options]="cardOptions"
[elementsOptions]="elementsOptions" // or change this ="options"发布于 2021-08-23 07:03:32
您需要在使用elements选项的组件中添加以下代码
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');
}
});https://stackoverflow.com/questions/65450994
复制相似问题