从@ ng-bootstrap / ng-bootstrap无法使用模式弹出窗口

时间:2019-05-23 14:04:10

标签: typescript bootstrap-modal angular7 ng-bootstrap

我正在尝试使用@ ng-bootstrap / ng-bootstrap打开Ngb模式。

但是每当我尝试打开Ngb Modal时,它在屏幕上都不可见。

我还试图在函数内部调用警报。警报功能被调用,但是模式弹出窗口在我的屏幕上不可见。

下面附有屏幕截图。enter image description here

当我单击检查元素时,代码和所有信息都可用。

这是我的代码。

component.html文件

<ng-template #content1 let-modal>
      <div class="modal-header">
         <h4 class="modal-title" id="modal-basic-title">Add New Topic</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 class="form-style-5">
            <form>
               <div class="form-group">

                  <input type="text" required  style="color=#000000
                     " #tname name="field1" placeholder="Enter Name...">
                  <BR>

                  <input type="text"  style="color=#000000
                     " #sname name="field2" placeholder="Enter Subject...">
               </div>
            </form>
         </div>
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-outline-dark" (click)="adddiscussions(tname.value,sname.value);modal.close('Save click')">Save</button>
      </div>
   </ng-template>

component.ts文件

openBackDropCustomClass(content, tp) {
        this.modalService.open(content, {
            backdropClass: 'light-blue-backdrop'
        });
    }


open(content) {
        alert("jayu"); // here I am making alert and it is coming on screen
        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}`;
        }
    }

我重新安装了节点模块。我重新安装了引导程序,但所有程序都无法正常工作。

在尝试所有已知方法时,有人可以帮助我吗?

提前谢谢!

0 个答案:

没有答案