ng-bootstrap ngbDropdown funktioniert nicht 4 Eckig

ng dropdowns funktionieren nicht.

Hinweis: ich folgte die Antwort hier und aktualisiert bootstrap zu 4-alpha, aber es funktioniert nicht.

Unten ist mein Paket.json-Datei:

    "@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"

html-code:

<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>

In meiner app.- Modul.ts ngbModule importiert zu.

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

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

Bootstrap buttons und text-Eingänge und alle die Stile, die angewendet werden, außer für die dropdown funktioniert nicht auf Klick.

ng-bootstrap ngbDropdown funktioniert nicht 4 Eckig

Jede Eingabe wird sehr geschätzt.

  • sind Sie sicher, dass die jquery-gibt es da eine Referenz?
  • Ist Ihre Komponente deklariert app.- Modul.ts oder in einem separaten Modul? Ob es sich um ein separates Modul, müssen Sie die import-und export-NgbModule als gut.
  • ja, es ist im Paket.json
  • meine Komponente wird in einem separaten Modul und ja, ich hinzufügen Ngb, um das Modul funktionierte! danke. Können Sie mir sagen, warum es nicht auch bei anderen Modulen, wenn es importiert root? Tut mir Leid, ich bin ziemlich neu in ng.
  • mit Winkel-Sie haben zum importieren von Richtlinien in jedem Modul, wo Sie wollen, verwenden Sie diese Richtlinien.
InformationsquelleAutor Maddy | 2017-07-17
  1. 19

    NgbModule importiert werden innerhalb der separaten Modul als gut. Credits: HaveSpacesuit

    InformationsquelleAutor Maddy
  2. 2

    hinzufügen ngb Module, die Sie verwenden,
    NgbModule importiert werden....

    @NgModule({
  imports: [
        ..,
        NgbModule.forRoot()
   ],
  ...
    InformationsquelleAutor mykil
  3. 0

    @Maddy
    Nur einige kleine änderung, um Ihren html-code:

    <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>

    ngbDropdownMenu ist-Eigenschaft Hinzugefügt, um "dropdown-menu" div.

    InformationsquelleAutor Yuvraj Chauhan
Schreibe einen Kommentar