无法在Angular的DOM元素中加载条纹卡

问题描述

如果用户选择条纹单选按钮，我想显示条纹卡。但是我收到一个错误消息，说没有DOM元素。谁能告诉我为什么即使更改了selectPayment状态后DOM元素仍无法加载

My UI

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 (将#修改为@）