ng-bootstrap 模式未显示

Question

Am using ng-bootstrap modal in my application to show dialogue box. but while clicking the button, nothing is happening, the modal is not displaying. while debugging it could find that the action is getting called, but the modal is not showing.

this is my 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 { }

this is my FeatureComponent class

 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'); } }

I have a list of features and each feature contains different user stories, so am planning to display the option to add user stories into the future on the modal.but while clicking the StoryComponent is not displaying.

Answer 1

I faced the same problem, the issue was with CSS. When I check the elements of the document, find that the modal elements was created but not showing in the screen. Below css has solved the issue.

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

Answer 2

ng-bootstrap 仅适用于 Bootstrap 4，与 Bootstrap 3 不兼容。

Answer 3

As @Ansar Samad pointed out it only works with bootstrap 4. If you need it in a Bootstrap 3 project you can checkout https://www.npmjs.com/package/ng-bootstrap-to-bootstrap-3

Intructions:

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

• import 'ng-bootstrap-to-bootstrap-3' somewhere in your code.

That's it!

Answer 4

I also had same problem, and found out that I was not including css link for bootstrap in my styles.css . Although I was using ng-bootstrap with bootstrap v4.

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

Answer 5

Now update @ng-bootstrap/ng-bootstrap to ^8.0.1 solves this error,

After updating if you get this error:

ERROR in getInternalNameOfClass() called on a non-ES5 class

Try changing target in the compilerOptions of your tsconfig.json from es5 to es2015