web-dev-qa-db-ja.com

ng-bootstrapモーダルが表示されない

ダイアログボックスを表示するために、アプリケーションで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をクリックしても表示されません。

javascripttwitter-bootstrapangularng-bootstrap
8
Ansar Samad

ng-bootstrapはBootstrap 4でのみ機能し、Bootstrap 3とは互換性がありません。

8
Ansar Samad

私は同じ問題に直面しました、問題はCSSにありました。ドキュメントの要素を確認すると、モーダル要素が作成されたが画面に表示されていないことがわかります。以下のcssで問題が解決しました。

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

@Ansar Samadが指摘したように、これはbootstrap 4でのみ機能します。Bootstrap 3プロジェクトで必要な場合は、チェックアウトできます https：/ /www.npmjs.com/package/ng-bootstrap-to-bootstrap-

はじめに：

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

  • import 'ng-bootstrap-to-bootstrap-3'コードのどこかに。

それでおしまい！

1
MotKohn

私も同じ問題を抱えていて、bootstrapのc​​ssリンクがstyles.cssに含まれていないことがわかりました。 bootstrapv4でng-bootstrapを使用していましたが。

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