html - 数据未绑定到模态

Question

感谢您阅读这个问题。

在一些 API 成功响应后，我正在从打字稿代码打开模式。

即使我不使用计时器，它也会在花费更多时间后正常绑定。

主要的是，如果我检查它会显示模态数据（不知道可能是因为滚动或刷新），即使我不会提到计时器，它也会在我检查后绑定。

我只是想澄清一下我使用了计时器，因为在我检查后可能是滚动或刷新它突然绑定，我认为可能是值分配和打开模式的同时过程。

这是我的 html

<div style="display: none">
<button class="primary" #myModalSuccess data-target="#myModalSuccess" data-toggle="modal"
  style="cursor: pointer;">Delete</button>

 <div id="myModalSuccess" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
  <div class="modal-content" *ngIf="checkOutConfFromRazor">

    <div class="modal-header">

      <button type="button" (click)="checkSubscriptionAndInvitee()" class="close" data-dismiss="modal"
        aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="text-center"><img style="height: 80px; " src="assets/img/dashboard/check_circle.svg"></div>
    <div class="modal-body">
      <h4 class="text-center primary">Payment successful</h4>
      <p class="text-center location-text ">Your payment has been proccessed! <br>Details of your transaction are
        listed below.
      </p>
      <div class="ver-divider"></div>
      <div class="hor-line"></div>
      <div class="ver-divider"></div>
      <p class="text-center primary">Transaction ID : &nbsp; <span
          class="text-right">{{checkOutConfFromRazor?.id}}</span> </p>
      <div class="ver-divider"></div>
      <div class="row">
        <div class="col">
          <label>Transaction Amount</label>
        </div>

        <div class="col text-right">
          <label> {{checkOutConfFromRazor?.amount | slice:0:checkOutConfFromRazor?.amount?.length-2}}
            &#x20B9;</label>
        </div>
      </div>


      <div class="ver-divider"></div>
      <div class="hor-line"></div>
      <div class="ver-divider"></div>

      <div class="row">
        <div class="col">
          <label>Transaction date</label>

        </div>

        <div class="col text-right">
          <label>{{checkOutConfFromRazor?.created_at | date}}</label>
        </div>
      </div>

      <div class="text-center mt-4">
        <button (click)="checkSubscriptionAndInvitee()" class="primary-button-big pl-5 pr-5 pt-1 pb-1"
          data-dismiss="modal" style="border: none;">Close</button>
      </div>
    </div>
  </div>
</div>

这是我的 .ts 代码

 this.subscription = this.userService.verifyCheckOut(val.planId, JSON.stringify(response)).subscribe(value => {

    if (value.isVerifyed) {
      this.checkOutConfFromRazor = value.payment;
      console.log("sucessData" + JSON.stringify(this.checkOutConfFromRazor));

      setTimeout(() => {
        this.myModalSuccess.nativeElement.click();
      }, 20000);

    } else {

      this.checkOutConfFromRazor = value.payment;
      this.myModalFailure.nativeElement.click();

    }

  });

标签： htmlangulartypescriptangular-materialbootstrap-modal