ngx-bootstrab模型弹出ESC不起作用

时间:2019-02-07 14:56:43

标签: angular

嗨,我用这个https://valor-software.com/ngx-bootstrap/#/modals#directive-auto-shown

对于模式弹出窗口,它可以正常工作,但是如果我单击esc,我将无法打开另一个弹出窗口

import { ModalDirective } from 'ngx-bootstrap/modal';

isModalShown: boolean = false;

 getUserById(id){
    this.isModalShown = true;
    console.log(this.isModalShown);

  }

  hideModal(): void {
    this.autoShownModal.hide();
  }

  onHidden(): void {
    this.isModalShown = false;
  }

模板

<table class="table table-bordered text-center">
              <thead class="text-center">
                  <tr>
                      <th>Name</th>
                      <th>Username</th>
                      <th>Email</th>
                      <th>Role</th>
                      <th>Action</th>
                  </tr>
              </thead>
              <tbody>
                  <tr *ngFor="let item of data">
                      <td >{{item.name}}</td>
                      <td>{{item.username}}</td>
                      <td>{{item.email}}</td>
                      <td>{{item.role}}</td>
                      <td>
                          <span (click)="getUserById(item._id)" class="glyphicon glyphicon-pencil edit"></span>
                        </td>
                  </tr>
              </tbody>
          </table>

<div *ngIf="isModalShown" [config]="{ show: true }" (onHidden)="onHidden()" bsModal #autoShownModal="bs-modal"
     class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dialog-auto-name">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="dialog-auto-name" class="modal-title pull-left">Auto shown modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>I am a modal that is shown right after initialization!</p>
        <p>I wasn't present in DOM until you clicked the button</p>
        <p>When you close me, I'll be removed from the DOM</p>
      </div>
    </div>
  </div>
</div>

如果我手动单击“关闭”图标,那么它会起作用

唯一的问题是单击esc和background

0 个答案:

没有答案