时间戳

首页 > 解决方案 > 引导和角度，模态弹出窗口未显示

angular - 引导和角度，模态弹出窗口未显示

问题描述

我有以下表格，其中有一个使用 bootstrap 4 的模态弹出窗口

<tbody *ngFor="let data  of json | sizeFilter : sizeInput">
            <tr>
                <td (click)="onUpdateClick(data.hash , data.size, data.time)" class="hHover"
                    title="Click to update the data">{{data.hash}}</td>
                <td>{{data.size}}</td>
                <td>{{data.time}}</td>
                <td>
                <td>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
                        Delete
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Are you sure?</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    Are you sure you that you want to delete the block?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-dismiss="modal">Close</button>
                                    <button type="button" (click)="onDeleteClick(data.hash)"  class="btn btn-primary">Delete</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>

问题是弹出窗口没有显示在弹出窗口中。一切对我来说似乎都很好，所以我卡住了。

标签： angulartwitter-bootstrap

解决方案

在 Angular 中，Bootstrap 的某些组件（例如模态）可以更好地与专用库（例如ng-bootstrap ）配合使用。该库允许您打开和关闭模态并在打开和关闭时发送变量。以这种方式使用它（我采用了文档本页第一个示例的代码）：

在您的 .html 文件中：

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</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">
    <form>
      <div class="form-group">
        <label for="dateOfBirth">Date of birth</label>
        <div class="input-group">
          <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

在您的 .ts 文件中：

import {Component} from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

另外，在你的代码中要小心，因为你的模态 div 在循环中，id 重复多次并且不是唯一的。模态的代码必须在循环之外。

推荐阅读