ng-bootstrap modal wird nicht angezeigt

Question

Verwenden Sie ng-Bootstrap Modal in meiner Anwendung, Dialogfeld anzuzeigen. aber während man auf den Knopf klickt, passiert nichts, das Modal wird nicht angezeigt. während des Debuggens kann es vorkommen, dass die Aktion aufgerufen wird, aber das Modal wird nicht angezeigt.

das ist mein 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 { }

das ist mein Feature Klasse

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

 
}

ich eine Liste von Funktionen haben und jede Funktion enthält verschiedene Benutzergeschichten, also plane ich, die Option anzuzeigen, um Benutzergeschichten in die Zukunft auf dem Modal hinzuzufügen, aber während das Klicken auf die StoryComponent nicht angezeigt wird.

Answer 1

ng-Bootstrap funktioniert nur mit Bootstrap 4, nicht kompatibel mit Bootstrap 3.

Answer 2

ich das gleiche Problem konfrontiert, war das Problem mit CSS. Wenn ich die Elemente des Dokuments überprüfe, finde ich, dass die modalen Elemente erstellt wurden, aber nicht auf dem Bildschirm angezeigt werden. Unten hat CSS das Problem gelöst.

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