монтировать элемент полосы к элементу в компоненте после * ngIf - PullRequest
0 голосов
/ 14 мая 2019

У меня есть полосовая карта и Iban, которые подключаются к элементу, но только если выбран этот тип оплаты. Когда я выбираю тип оплаты из переключателей при условии, что тип загружается в переменную, а * ngIf показывает элемент div. Я получаю сообщение об ошибке DOM-элемента при попытке использовать метод mount. Есть ли способ сделать это?

  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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...