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"...

相关代码：

app.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>

模态在ng bootstrap中不可见

0 个答案: