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

NG的自舉只能用引導4，不與引導3.

Answer 2

兼容的作品我面臨同樣的問題，這個問題是與CSS。當我檢查文檔的元素時，發現模態元素已創建但未顯示在屏幕上。在CSS下面解決了這個問題。

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