Question

我有一个条纹卡和一个固定在元素上的Iban，但是只有在选择了该付款类型后才可以。当我从提供的单选按钮中选择一种付款类型时，该类型将加载到变量中，并且* ngIf显示div元素。尝试使用mount方法时，出现DOM元素错误，有没有办法做到？

  logChange(type){
    this.paymentType=type.toLowerCase();
    if(this.paymentType==='credit card'){
      return this.createCard();
    }
    if(this.paymentType='iban'){
      return this.createIban();
    }
  }
    createCard(){
    this.card = this.elements.create("card", {
      style: this.cardStyle,
      hidePostalCode: true
    });
    this.card.mount("#card-element");
    this.card.addEventListener("change", event => {
      this.cardComplete = event.complete;
      const cardErrors = document.getElementById("card-errors");
      if (event.error) {
        cardErrors.textContent = event.error.message;
        cardErrors.classList.add("visible");
      } else {
        cardErrors.classList.remove("visible");
      }
    });
  }

<div class="payment-select">
                  <mat-radio-group aria-label="Select a Payment Option">
                    <mat-radio-button (change)="logChange(type);" *ngFor="let type of paymentTypes" [value]="type">
                      {{type}}</mat-radio-button>
                  </mat-radio-group>
                </div>
                <div class="payment-details">

                  <div *ngIf="paymentType==='credit card'" class="card">
                    <div id="card-element">
                    </div>
                    <div id="card-errors">
                    </div>
                  </div>

                  <div *ngIf="paymentType==='iban'" class="iban">

                  </div>
                </div>

我得到的错误，这是有道理的，因为在组件初始化时未注册元素是

InvoicePaymentComponent.html:45 ERROR IntegrationError: The selector 
  you specified (#card-element) applies to no DOM elements that are 
 currently on the page.
 Make sure th

Answer 1

即使不是像* ngIf指令那样从DOM中删除容器，也可以使用[隐藏]找到解决方案。

<div [hidden]="paymentType==='iban'" class="iban">
     // Stripe elements
</div>

或ng-show / ng-hide for angular.js

在* ngIf之后将Stripe元素安装到组件中的元素

1 个答案: