页面上的多个模态:相同的模态由不同的按钮触发

时间:2019-05-07 18:08:50

标签: html typescript angular6 bootstrap-modal

页面上有两个按钮。每个按钮应弹出一个带有各自ID的不同模式。但是,两个按钮都触发相同的模式形式。

我已经为他们两个分配了ID,但是按钮仅触发请求模式形式,而不触发克隆帐户形式。

代码如下:

<button class="list-group-item collapsed" data-parent="#sidebar" [disabled]="!showAccountsTable" (click)="openCloneAccountModal(content)"><i class="far fa-clone"></i> <span class="hidden-sm-down"> Clone Selected Account</span> </button> 

<button class="list-group-item collapsed" data-parent="#sidebar" [disabled]="!showMakerCheckerTable" (click)="openRequestModule(content)"><i class="fa fa-thumbs-up"></i><i class="fa fa-thumbs-down" ></i><span class="hidden-sm-down"> Accept/Decline Request</span> </button> 


<ng-template #content let-modal>


  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">New Account</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

    <div class="modal-body">
    ....
    </div>
</ng-template>


<ng-template #content let-modal>
<!-- Update Reuest -->
  <div class="modal-header">
      <h4 class="modal-title" id="modal-request">Update Request</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="dropdown">
      Approve 
    <select [(ngModel)]="approve" >
     <option  class="dropdown-item" [value]="true" >true</option>
     <option  class="dropdown-item" [value]="false" >false</option>
    </select>

    </div>

    <div class="modal-body">
      <form (ngSubmit)="onSubmitPending()">

        <div class="modal-footer">
          <button  type="submit" class="btn btn-outline-dark" >Save</button>
        </div>

      </form>
    </div>
  </ng-template>

这是Typsecript:


  openCloneAccountModal(content) {

    this.newAccount = this.clonedAccount;
    this.newAccount.lastUpdatedDate = new Date();
    this.newAccount.enteredDate = new Date();
    this.newAccount.enteredBy = "Hardcoded User Value (TEMP)";
    this.newAccount.lastUpdatedBy = "Hardcoded User Value (TEMP)";
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  openRequestModule(content){
    console.log(this.pendingSelected);
    console.log("id" + this.pendingSelected.id);
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

0 个答案:

没有答案