如何在我使用其中的元素之前检查我的表单步进步骤是否已完成渲染？

Question

我正在使用 angular2-wizard 填写银行账户详细信息。在我的第二步中，我要求提供帐户信息（号码、cvc、到期日），这些元素来自 Stripe.js 使用 ngx-stripe 库来 mount 我的元素。然后，当我单击下一步并创建我的 Stripe 令牌 createToken() 时，我收到此错误：

IntegrationError：我们无法从指定的元素中检索数据。请确保您尝试使用的元素仍处于安装状态。

我对为什么会发生这种情况的想法 - Angular2-wizard 正在删除步骤之间的 DOM 元素，或者我没有等待第 2 步（帐户信息）在我尝试安装元素之前呈现。 我在这里看到这些相似的帖子

1. Angular 8：条纹元素嵌套在星云组件中
2. 请确保您尝试使用的元素仍处于安装状态

问题 -

1. 在创建我的 Stripe 令牌时，如何调试它以查看元素是否已被删除、重置或隐藏在 DOM 中？
2. 在挂载元素之前，我如何等待或确保下一步（第 2 步）已在 DOM 中完全呈现？

我尝试了什么 -

1. 我在调用 createToken() 之前通过调用 Stripe 库中的“this.debitCardNumberElement_isMounted()”检查了元素“this.debitCardNumberElement”，看它是否仍然被挂载，看起来它仍然有值并且被挂载。该变量有值，它没有 null 或未定义的值，所以我认为它仍然是挂载的，但可能是错误的。
2. 查看步骤库是否有一些发射器让我知道第二步完成渲染时，但我认为没有。那么也许还有另一种检查方法？

这是我的例子

showAccountFieldsAndMountElements($event) {
  // mount the 3 elements
  this.stripeService.elements(this.stripeElementsOptions).subscribe(elements => {
    this.elements = elements;
    // Only mount the elements the first time
    if (!this.debitCardNumberElement) {
      this.debitCardNumberElement = elements.create('cardNumber', this.debitCardNumberElementOptions);
      this.debitCardNumberElement.mount('#floatingDebitCardNumber');
      this.debitCardNumberElement.on('change', (event) => {
        this.cardNumberErrors = event.error ? event.error.message : null;
        this.cardNumberValid = event.complete;
      })
    }
    if (!this.debitCardExpiryElement) {
      this.debitCardExpiryElement = elements.create('cardExpiry', this.debitCardExpiryElementOptions);
      this.debitCardExpiryElement.mount('#floatingDebitCardExpiry');
      this.debitCardExpiryElement.on('change', (event) => {
        this.cardExpiryErrors = event.error ? event.error.message : null;
        this.cardExpiryValid = event.complete;
      })
    }
    if (!this.debitCardCvcElement) {
      this.debitCardCvcElement = elements.create('cardCvc', this.debitCardCvcElementOptions);
      this.debitCardCvcElement.mount('#floatingDebitCardCvc');
      this.debitCardCvcElement.on('change', (event) => {
        this.cardCvcErrors = event.error ? event.error.message : null;
        this.cardCvcValid = event.complete;
      })
    }
  });
}

createTokenAndShowFinalStep($event) {
  this.stripeService.createToken(this.debitCardNumberElement, data).subscribe((result) => {
    this.loadingAddress = false;
    if (result.token) {
      this.externalToken = result.token.id;
      this.initNext();
    } else if (result.error) {
      // Error creating the token
      console.log(result.error);
      this.alertService.danger(result.error.message);
    }
  });
}

<form-wizard>
  <wizard-step [title]="'Personal Info'" (onNext)="showAccountFieldsAndMountElements($event)">
    <h1>Step1</h1>
  </wizard-step>
  <wizard-step [title]="'Account Info'" (onNext)="createTokenAndShowFinalStep($event)">
    <h1>Step2</h1>
    <div class="form-floating mb-3">
      <div class="form-control stripe-form-control" id="floatingDebitCardNumber" placeholder="ex. 1111 1111 1111 1111"></div>
      <label for="floatingDebitCardNumber">Card Number</label>
      <div *ngIf="cardNumberErrors" class="invalid-feedback d-block" role="alert">
        {{cardNumberErrors}}
      </div>
    </div>

    <div class="row mb-md-3">
      <div class="col-md mb-3 mb-md-0">
        <div class="form-floating">
          <div class="form-control" id="floatingDebitCardExpiry" placeholder="ex. 11/23"></div>
          <label for="floatingDebitCardExpiry">Card Expiration</label>
          <ng-container *ngIf="cardExpiryErrors">
            <span class="text-danger">{{cardExpiryErrors}}</span>
          </ng-container>
        </div>
      </div>
      <div class="col-md">
        <div class="form-floating">
          <div class="form-control" id="floatingDebitCardCvc" placeholder="ex. 123"></div>
          <label for="floatingDebitCardCvc">Card CVC</label>
          <ng-container *ngIf="cardCvcErrors">
            <span class="text-danger">{{cardCvcErrors}}</span>
          </ng-container>
        </div>
      </div>
    </div>
  </wizard-step>
</form-wizard>