Ng bootstrap模态仅在关闭一个模态弹出窗口后才弹出

时间:2019-06-08 18:47:54

标签: css angular web mean-stack ng-bootstrap

这是问题所在,enter image description here

我只想打开popups successModal if(res != null || res != undefined),否则要弹出failureModal。但是在关闭reserveModal之后,它会在后台弹出。

这是我的代码: 这是我的代码:-

this.locolService.sendActivityRequest(requestObject).subscribe((res)=>{
      console.log('response after sending request ', res.description);
      if(res != null || res != undefined){
        this.reserveModel.close();
        this.modalService.open(successModal);
      }
    }, error =>{
      this.errors = error.error.description;
      this.errors = this.errors.replace("User","You");
        console.log('error ', this.errors);
      this.reserveModel.close();
      this.modalService.open(failureModal);
    });
  }

这是我的component.html:-

<ng-template #requestSentModelSuccess let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Congrats! Your place has been reserved. A will of receipt will be sent on your email also<br /><br />Check My
      Account
      for your reservations</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Close</button>
  </div>
</ng-template>

  <!--MODAL-3-->
  <ng-template #requestSentModelFaliure let-c="close" let-d="dismiss">
    <div class="modal-header">
      <h5 class="modal-title text-uppercase" id="">Error</h5>
      <button type="button" class="close" (click)="d('Cross click')" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>{{this.errors}}<br /><br />Check My
        Account
        for your reservations</p>

      <a type="button" (click)="onNewSearch(false)" class="btn btn-primary mybtngreen btn-lg text-uppercase">My
        Account</a>
      <a type="button" (click)="onMyAccount(false)" class="btn btn-outline-secondary btn-lg text-uppercase">New
        search</a>
      <div class="mt-2"></div>
      <div class="clearfix"></div>
    </div>
  </ng-template>

我已经使用NgbModalRef引用了requestSentModelFaliure作为failureModal和requestSentModelSuccess作为SuccessModal。

0 个答案:

没有答案