如何解决无法在Angular的DOM元素中加载条纹卡
如果用户选择条纹单选按钮,我想显示条纹卡。但是我收到一个错误消息,说没有DOM元素。谁能告诉我为什么即使更改了selectPayment状态后DOM元素仍无法加载
core.js:6014错误IntegrationError:您指定的选择器(#card-element)不适用于该页面上当前没有的DOM元素。 调用mount()之前,请确保该元素存在于页面上。
这是我的HTML
<form class="mb-5" novalidate [formGroup]="paymentForm">
<h3 class="pb-5">Please do the payment !!</h3>
<div class="form-group">
<input type="text" class="form-control" formControlName="name" placeholder="Full Name*" required>
<span class="text-danger" *ngIf="paymentForm.get('name').hasError('required') && submitted"> Full Name is
required</span>
</div>
<div class="form-group">
<input type="number" class="form-control" formControlName="amount" placeholder="Amount*" required>
<span class="text-danger" *ngIf="paymentForm.get('amount').hasError('required') && submitted"> Amount is
required</span>
</div>
<div class="form-group">
<input class="form-control" type="text" formControlName="email" placeholder="Email*">
<span class="text-danger" *ngIf="paymentForm.get('email').hasError('required') && submitted"> Email is
required</span>
</div>
<div class="form-inline form-group">
<div class="form-check border bg-primary text-white p-2 mr-3">
<input class="form-check-input" type="radio" name="paymentGateway" id="razorPay" value="razorPay" (change)="selectPaymentType($event)">
<label class="form-check-label" for="razorPay">
Razor Pay
</label>
</div>
<div class="form-check border bg-success text-white p-2">
<input class="form-check-input" type="radio" name="paymentGateway" id="stripe" value="stripe" (change)="selectPaymentType($event)">
<label class="form-check-label" for="stripe">
Stripe
</label>
</div>
</div>
<div class="form-group border p-2" *ngIf="selectPayment=='stripe'">
<div id="card-element" class="field"></div>
</div>
<div class="d-flex justify-content-center">
<button class="btn btn-warning border shadow" type="submit" (click)="buy()">
Buy
</button>
</div>
</form>
这是打字稿代码
createStripeCard(){
this.stripeService.elements(this.elementsOptions)
.subscribe(elements => {
this.elements = elements;
if (!this.card) {
this.card = this.elements.create('card',{
iconStyle: 'solid',style: {
base: {
iconColor: '#666EE8',color: '#31325F',lineHeight: '40px',fontWeight: 300,fontFamily: '"Helvetica Neue",Helvetica,sans-serif',fontSize: '18px','::placeholder': {
color: '#CFD7E0'
}
}
},});
this.card.mount('#card-element');
}
});
}
selectPaymentType(event: any) {
this.selectPayment = event.target.value;
if(this.selectPayment=='stripe'){
this.createStripeCard();
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。