web-dev-qa-db-fra.com

ng-bootstrap ngbDropdown ne fonctionne pas Angular 4

les listes déroulantes ng ne fonctionnent pas.

Remarque: j'ai suivi la réponse ici et mis à niveau bootstrap en 4-alpha, mais cela ne fonctionne pas.

Voici mon fichier package.json:

    "@angular/animations": "^4.3.0",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/router": "^4.3.0",
    "@angular/upgrade": "^4.3.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",
    "@types/jquery": "^3.2.8",
    "angular-calendar": "^0.19.0",
    "angular2-ladda": "^1.2.1",
    "angular2-text-mask": "^8.0.2",
    "angular2-toaster": "^4.0.1",
    "animate.css": "^3.5.2",
    "bootstrap": "4.0.0-alpha.6"

code HTML:

<div ngbDropdown class="d-inline-block">
                <button class="btn btn-outline-primary nav-link dropdown-toggle" id="dropdownBasic1" ngbDropdownToggle>More Actions..</button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBasic1">
                    <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>

Dans mon app.module.ts, ngbModule est également importé.

import {NgbModule} from "@ng-bootstrap/ng-bootstrap";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule.forRoot()
//more
]

Les boutons d'amorçage et les entrées de texte fonctionnent et tous les styles sont appliqués, sauf que la liste déroulante ne fonctionne pas au clic.

enter image description here

Toute contribution est très appréciée.

angularbootstrap-4ng-bootstrap
13
Maddy

NgbModule doit également être importé dans le module séparé. Crédits: HaveSpacesuit

18
Maddy

ajoutez les modules ngb que vous utilisez, NgbModule doit être importé ....

@NgModule({
  imports: [
        ..,
        NgbModule.forRoot()
   ],
  ...
1
mykil

@Maddy Apportez quelques modifications mineures à votre code html:

<div ngbDropdown class="d-inline-block">
                <button class="btn btn-outline-primary nav-link dropdown-toggle" id="dropdownBasic1" ngbDropdownToggle>More Actions..</button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBasic1" 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>

ngbDropdownMen est la propriété ajoutée à la div "dropdown-menu".

1
Yuvraj Chauhan