ng-bootstrap 模式未顯示

Question

我在我的應用程序中使用 ng-bootstrap 模式來顯示對話框。 但是在單擊按鈕時，什么也沒有發生，模態沒有顯示。 在調試時，它可能會發現正在調用該操作，但未顯示模態。

這是我的 app.module.ts

 import {NgModule } from '@angular/core'; import {BrowserModule } from '@angular/platform-browser'; import {TaskService} from '../app/task/task.service'; import {TaskComponent} from '../app/task/task.component'; import {AppComponent } from './app.component'; import {FormsModule ,ReactiveFormsModule} from '@angular/forms'; import {HttpModule } from '@angular/http'; import {RouterModule, Routes,Route } from '@angular/router'; import {AddNewTaskComponent} from './task/addtask.component'; import {EventComponent} from '../app/controller/event.component' import {EventService} from '../app/service/event.service' import {AddNewEventComponent} from '../app/controller/addevent.component' import {AddEventService} from '../app/service/addevent.service' import {WeatherComponent} from '../app/controller/weather.component' import {LoginComponent} from '../app/controller/login.component' import {RegisterComponent} from '../app/controller/register.component' import {DashBoardcomponent} from '../app/controller/dashboard.component' import {FeatureComponent,StoryComponents} from '../app/controller/feature.component' import {AddTaskService} from '../app/task/addtask.service' import {FeatureServices } from '../app/service/feature.services' import {FileUploadComponents } from '../app/controller/fileUpload.component' import {AngularFireModule } from 'angularfire2' import {NgbModule } from '@ng-bootstrap/ng-bootstrap' //index routing , redirect to login for the blank request const indexRoutes:Route = { path:'',component:LoginComponent } // for all invalid routers , it will redirect to login component const fallbackRoutes = { path:'**',component:LoginComponent } // order is important, routes get called on the order which they defined const routes: Routes = [ indexRoutes, { path: 'register', component: RegisterComponent }, { path: 'dash', component: DashBoardcomponent, children: [ { // shows feature as default path: '', redirectTo: 'feature', pathMatch: 'full' }, { path: 'events', component: EventComponent, children:[ { path: 'addevent', component: AddNewEventComponent } ] }, { path: 'task', component: TaskComponent, children:[ { path: 'addtask', component: AddNewTaskComponent } ] }, { path: 'weather', component: WeatherComponent }, { path: 'feature', component: FeatureComponent, }, { path: 'uploads', component: FileUploadComponents, } ] } ]; export const routing = RouterModule.forRoot(routes); }; @NgModule({ imports: [ BrowserModule , FormsModule, ReactiveFormsModule, HttpModule, routing, AngularFireModule.initializeApp(firebaseConfig), NgbModule.forRoot() ], providers: [TaskService,EventService,AddEventService,AddTaskService,FeatureServices], declarations: [ AppComponent, LoginComponent, TaskComponent, AddNewTaskComponent, EventComponent, AddNewEventComponent, WeatherComponent, RegisterComponent, DashBoardcomponent, FeatureComponent, FileUploadComponents, StoryComponents ], entryComponents: [StoryComponents], bootstrap: [ AppComponent ], }) export class AppModule { }

這是我的 FeatureComponent 類

 import { Component, ViewChild,Input } from '@angular/core'; import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal'; import {FeatureServices} from '../service/feature.services' import {ComponentAction} from '../base/Component.action' import {Features} from '../model/feature' import { NgForm } from '@angular/forms'; import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'addstories', template: ` <div class="modal-header"> <h4 class="modal-title">Hi there!</h4> <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Hello, {{name}}!</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button> </div> ` }) export class StoryComponents { @Input() name; constructor(public activeModal: NgbActiveModal) {} } @Component({ moduleId:module.id, selector:'feature', template:` <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css"> <div> <button class="btn btn-primary" (click)="listFeature()">All Features</button> <button class="btn btn-primary" (click)="showAddFeature()" >Add Features</button> </div> {{enableAddFeature}} <!-- loads child component list task and add new task --> <router-outlet></router-outlet> <form *ngIf="mode == 'insert' || mode == 'update' " #featureForm="ngForm" (ngSubmit)="processFeature(featureForm)"> <div class="form-group"> <label for="title">Feature Title</label> <input type="text" class="form-control" id="title" name="title" placeholder="Enter Feature Title" [(ngModel)]=selectedFeature.title> </div> <div class="form-group"> <label for="descr">Feature Title</label> <input type="text" class="form-control" id="descr" name="descr" placeholder="Enter Feature Description" [(ngModel)]=selectedFeature.descr> </div> <div class="form-group"> <label for="area">Feature Title</label> <input type="text" class="form-control" id="area" name="area" placeholder="Enter Feature Area" [(ngModel)]=selectedFeature.area> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <br/> <div class="container"> <div class="row"> <div class=""> <table class="table table-hover table-responsive table-bordered"> <thead> <tr> <th class="col-md-2">Title</th> <th class="col-md-2">Descr</th> <th class="col-md-1">Area</th> <th class="col-md-1">User Stories</th> <th class="col-md-1"></th> </tr> </thead> <tbody> <tr *ngFor="let feature of features"> <td><a data-toggle="modal" data-target="#myModal">{{feature.title}}</a></td> <td>{{feature.descr}}</td> <td>{{feature.area}}</td> <td *ngIf ="feature.userstories == null" >0</td> <td *ngIf ="feature.userstories != null" > {{feature.userstories.length}}</td> <td><a class='btn btn-info btn-xs' (click)="editFeature(feature._id)"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a (click)="deleteFeature(feature)" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td> </tr> </tbody> </table> </div> </div> </div> <button type="button" class="btn btn-default" (click)="open()">Open me!</button> ` }) export class FeatureComponent extends ComponentAction{ features:Features[] mode :string = "start"; isEditMode = false; selectedFeature: Features; constructor(private featureService:FeatureServices,private modalService: NgbModal){ super(); this.getFeatures(); } getFeatures(){ this.featureService.getFeatures() .subscribe(result => { console.log('features from mongo :'+JSON.stringify(result)) this.features = result; console.log('this features :'+JSON.stringify(this.features)) }) } open() { console.log('u clicked me'); const modalRef = this.modalService.open(StoryComponents); modalRef.componentInstance.name = 'World'; console.log('finshed'); } }

我有一個功能列表，每個功能都包含不同的用戶故事，因此我計划在模態上顯示將用戶故事添加到未來的選項。但是單擊 StoryComponent 時未顯示。

Answer 1

我遇到了同樣的問題，問題出在 CSS 上。 當我檢查文檔的元素時，發現模態元素已創建但未顯示在屏幕中。 下面的css已經解決了這個問題。

   .modal-backdrop.fade
   {
     opacity: 0.5;
   }
   .modal-open .modal
   {
     opacity: 1;
   }

Answer 2

ng-bootstrap 僅適用於 Bootstrap 4，與 Bootstrap 3 不兼容。

Answer 3

正如@Ansar Samad 指出的，它只適用於 bootstrap 4。如果你在 Bootstrap 3 項目中需要它，你可以查看https://www.npmjs.com/package/ng-bootstrap-to-bootstrap-3

說明：

• npm install ng-bootstrap-to-bootstrap-3

• 在代碼中import 'ng-bootstrap-to-bootstrap-3'某處import 'ng-bootstrap-to-bootstrap-3' 。

就是這樣！

Answer 4

我也遇到了同樣的問題，發現我的styles.css沒有包含 bootstrap 的 css 鏈接。 雖然我在 bootstrap v4 中使用了 ng-bootstrap。

@import url('../node_modules/bootstrap/dist/css/bootstrap.min.css');

Answer 5

現在更新@ng-bootstrap/ng-bootstrap到^8.0.1解決了這個錯誤，

更新后如果出現此錯誤：

在非 ES5 類上調用 getInternalNameOfClass() 中的錯誤

嘗試將tsconfig.json的compilerOptions中的tsconfig.json從es5為es2015