Angular 2: ng bootstrap drop down не работает для меня

Question

Я пытаюсь реализовать ng-bootstrap с помощью plunker http://plnkr.co/edit/?p=preview.

Ее не работает, я не могу найти Устранена проблема

.

Ниже system.config.js кода,

/** 
 
* System configuration for Angular samples 
 
* Adjust as necessary for your application needs. 
 
*/ 
 
(function (global) { 
 
    System.config({ 
 
    paths: { 
 
     // paths serve as alias 
 
     'npm:': 'node_modules/' 
 
    }, 
 
    // map tells the System loader where to look for things 
 
    map: { 
 
     // our app is within the app folder 
 
     app: 'app', 
 

 
     // angular bundles 
 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
 
     '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js', 
 
     // other libraries 
 
     'rxjs':      'npm:rxjs', 
 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
 
    }, 
 
    // packages tells the System loader how to load when no filename and/or no extension 
 
    packages: { 
 
     app: { 
 
     main: './main.js', 
 
     defaultExtension: 'js' 
 
     }, 
 
     rxjs: { 
 
     defaultExtension: 'js' 
 
     }, 
 
     
 
    } 
 
    }); 
 
})(this);

app.module.ts

import { NgModule }  from '@angular/core'; 
 
import { BrowserModule } from '@angular/platform-browser'; 
 
import { NgbdDropdownConfig } from 'app/dropdown-config'; 
 
import { AppComponent } from './app.component'; 
 

 
@NgModule({ 
 
    imports:  [ BrowserModule, ], 
 
    declarations: [ AppComponent,NgbdDropdownConfig ], 
 
    bootstrap: [ AppComponent ] 
 
}) 
 
export class AppModule { }

app.component.ts код

import { Component } from '@angular/core'; 
 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
 
import { NgbdDropdownConfig } from 'app/dropdown-config'; 
 
@Component({ 
 
    selector: 'my-app', 
 
    template: ` <div class="container-fluid"> 
 
    
 
    <ngbd-dropdown-config></ngbd-dropdown-config> 
 
    </div>`, 
 
}) 
 
export class AppComponent { }

выпадающие-config.ts код

import {Component} from '@angular/core'; 
 
import {NgbDropdownConfig} from '@ng-bootstrap/ng-bootstrap'; 
 

 
@Component({ 
 
    selector: 'ngbd-dropdown-config', 
 
    templateUrl: 'app/dropdown-config.html', 
 
    providers: [NgbDropdownConfig] // add NgbDropdownConfig to the component providers 
 
}) 
 
export class NgbdDropdownConfig { 
 
    constructor(config: NgbDropdownConfig) { 
 
    // customize default values of dropdowns used by this component tree 
 
    config.up = true; 
 
    config.autoClose = false; 
 
    } 
 
}

выпадающий-config.html

<p>This dropdown uses customized default values.</p> 
 

 
<div ngbDropdown> 
 
    <button class="btn btn-outline-primary" id="dropdownMenu3" ngbDropdownToggle>Toggle</button> 
 
    <div class="dropdown-menu" aria-labelledby="dropdownMenu3"> 
 
    <button class="dropdown-item">Action - 1</button> 
 
    <button class="dropdown-item">Another Action</button> 
 
    <button class="dropdown-item">Something else is here</button> 
 
    </div> 
 
</div>

Поскольку нет никакого сообщения об ошибке, я не могу найти проблему. Может ли кто-нибудь выяснить, в чем проблема. Благодарю.

Answer 1

С последней версией (1.0.0-alpha.18) он не работает со мной. Переход на предыдущую версию:

npm i @ng-bootstrap/ng-bootstrap@1.0.0-alpha.17 --save 

и должно быть хорошо.

Answer 2

@Manjula D Просто сделайте ниже изменения в раскрывающемся-config.html

<div ngbDropdown> 
    <button class="btn btn-outline-primary" id="dropdownMenu3" ngbDropdownToggle>Toggle</button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenu3" ngbDropdownMenu> 
    <button class="dropdown-item">Action - 1</button> 
    <button class="dropdown-item">Another Action</button> 
    <button class="dropdown-item">Something else is here</button> 
    </div> 
</div> 

ngbDropdownMenu это свойство, добавленное к "выпадающий-меню" DIV.

Answer 3

У меня была аналогичная проблема:

Я выбежала

npm install --save @ng-bootstrap/ng-bootstrap 

npm install --save bootstrap@4.0.0-beta.2 

шаблон/html предоставляется здесь: https://ng-bootstrap.github.io/#/components/dropdown/examples

В стилях.CSS:

@import "~bootstrap/dist/css/bootstrap.css"; 

Еще что-то не работает на данный момент, так что я снова побежал

npm install 

и все работало.