Angular 8: полосовые элементы, вложенные в небулярные компоненты - PullRequest
Новая
       13

Angular 8: полосовые элементы, вложенные в небулярные компоненты

0 голосов
/ 27 апреля 2020

Проблема: я сталкиваюсь с проблемой, когда не могу токенизировать информацию о кредитной карте, размещенную внутри элемента полосы карты, который я монтирую на свой компонент.

В настоящее время я использую компонент Nebular Stepper (https://akveo.github.io/nebular/docs/components/stepper/overview#nbsteppercomponent) и имеют вложенный дочерний компонент со следующим кодом ts: 

public async fetchCardInput(): Promise<any> {
    let address: Address = this.ccAddress.fetchAddressData();
    let name = this.getCardholderName();
    let line2 = address.getAddressLine2();

    let cardTokenPayload = {
        name: name,
        address_line1: address.getAddressLine1(),
        address_city: address.getCity(),
        address_state: address.getState(),
        address_zip: address.getZipCode(),
        country: this.constants.US,
        currency: this.constants.USD
    };

    if (line2) {
        cardTokenPayload['address_line2'] = line2;
    }

    const { token, error } = await this.stripe.createToken(this.card, cardTokenPayload);

    if (error) {
        console.log('Something went wrong: ', error);
        return null;
    } else {
        console.log('SUCCESS! Token: ', token);

        let data = {
            tokenId: token.id,
            address: address,
            cardholderName: name
        }

        return data;
    }
}

html (извлек * html и ts из дочернего компонента, но это продолжает вести себя так же): 

<nb-step label="Payment / Payout">
  <div class="heading">{{ constants.PAYMENT_INFORMATION }}</div>
  <label class="input-label">{{ constants.CREDIT_CARD_INFORMATION }}</label>
  <div class="card-container">
      <div id="card-element" #cardElement></div>
  </div>
  <div *ngIf="error" class="error mt-10">{{ error }}</div>
</nb-step>

Дело в том, что эта реализация работает совершенно нормально, когда она не вложена в компонент Nebular. Кто-нибудь нашел решение этой проблемы или, по крайней мере, знаком с компонентами Nebular и тем, что они делают под капотом?

РЕДАКТИРОВАТЬ: Добавление исключения браузера: 

ERROR Error: Uncaught (in promise): IntegrationError: We could not retrieve data from the specified Element.
          Please make sure the Element you are attempting to use is still mounted.

Я использую Angular 8 и Nebular 4.5.0.

Заранее спасибо!

...