模態在ng引導中不可見

Question

當我激活模態時，它或模態背景都不顯示爲可見。我可以在開發工具中看到元素正在被創建，並且當我在顯示模式的地方以外點擊時正在被正確銷燬。

我試圖複製我使用下列這裏顯示https://ng-bootstrap.github.io/app/components/modal/demos/basic/plnkr.html

的例子：

@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25（https://ng-bootstrap.github.io/#/home）

@angular/common": "4.x"...

相關代碼：

應用。 module.ts：

個

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 

@NgModule({ 
    bootstrap: [App], 
    declarations: [ 
    App 
    ], 
    imports: [ // import Angular's modules 
    BrowserModule, 
    ... 
    NgbModule.forRoot(), 
    ] 
... 

dashsboard.module.ts：

import { NgbDatepickerModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap'; 

@NgModule({ 
    imports: [ 
    ... 
    NgbDatepickerModule, 
    NgbModalModule 
    ], 
    declarations: [ 
    DashboardComponent, 
    ], 
    ... 
}) 

dashboard.component.ts：

import { NgbDateStruct, NgbModal } from "@ng-bootstrap/ng-bootstrap"; 

export class DashboardComponent { 
    ... 
    constructor(_modalService: NgbModal) {...} 

    public showModal(content) { 
    this._datePickerService.open(content).result.then((result) => { 
     Logger.debug('show result:', result); 
    }, (reason) => { 
     Logger.debug('dismissal reason', reason); 
    }) 
    } 
} 

dashboard.component.html：

<input placeholder="from" (click)="showModal(content)"> 

... 

<ng-template #content let-c="close" let-d="dismiss"> 
    <div class="modal-header"> 
    <h4 class="modal-title">Modal title</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>One fine body&hellip;</p> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button> 
    </div> 
</ng-template> 

Answer 1

也許你正在使用bootstrap 3而不是bootstap 4。如果是的話，你應該切換到引導程序4或複製它們的類。

在仔細閱讀代碼後，您正在使用this._datePickerService打開模式，您應該使用this._modalService.open（content）;