У меня есть полосовая карта и 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