Angular 7 NGB 手风琴菜单未呈现

Question

我正在尝试直接从 ng bootstrap 站点呈现以下手风琴菜单：

<div class="container-fluid">
  <div class="col-sm-12">
    <h1 class="text-center">
      Discounts
    </h1>
    <div class="row">
      <ngb-accordion #acc="ngbAccordion">
        <ngb-panel id="toggle-1" title="First panel">
          <ng-template ngbPanelContent>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
            labore sustainable VHS.
          </ng-template>
        </ngb-panel>
        <ngb-panel id="toggle-2" title="Second">
          <ng-template ngbPanelContent>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
            labore sustainable VHS.
          </ng-template>
        </ngb-panel>
      </ngb-accordion>
    </div>
      .
      .
      .

我们有 angular 7，ng-bootstrap 4+，据我所知，一切都应该有效。我们现在不知所措。这是我的应用程序模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavMenuTopComponent } from './views/common/nav-menu-top/nav-menu-top.component';
import { LoginComponent } from './views/common/login.component';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import { AdministrationAnnouncementsComponent } from './views/administration/announcements/administrationAnnouncements.component';
import { AdministrationAppointmentsComponent } from './views/administration/appointments/administrationAppointments.component';
//import { AdministrationAppointmentsComponent } from './views/administration/appointments/administrationAppointments_2.component';
import { AdministrationArchivesComponent } from './views/administration/archives/administrationArchives.component';
import { AdministrationCallsComponent } from './views/administration/calls/administrationCalls.component';
import { AdministrationCompaniesComponent } from './views/administration/companies/administrationCompanies.component';
import { AdministrationCustomersComponent } from './views/administration/customers/administrationCustomers.component';
import { AdministrationEmployeesComponent } from './views/administration/employees/administrationEmployees.component';
import { AdministrationInvoicesComponent } from './views/administration/invoices/administrationInvoices.component';
import { AdministrationObservationsComponent } from './views/administration/observations/administrationObservations.component';
import { AdministrationProblemsComponent } from './views/administration/problems/administrationProblems.component';
import { AdministrationQuickInvoicesComponent } from './views/administration/quickInvoices/administrationQuickInvoices.component';
//import { TechnicianAppointmentsComponent } from './views/technician/appointments/technicianAppointments.component';
//import { TechnicianDiscountsComponent } from './views/technician/discounts/technicianDiscounts.component';
//import { TechnicianHomeComponent } from './views/technician/home/technicianHome.component';
//import { TechnicianInvoicesComponent } from './views/technician/invoices/technicianInvoices.component';
//import { TechnicianOptionsComponent } from './views/technician/options/technicianOptions.component';
//import { TechnicianProblemsComponent } from './views/technician/problems/technicianProblems.component';
//import { TechnicianReviewsComponent } from './views/technician/reviews/technicianReviews.component';
//import { TechnicianSolutionsComponent } from './views/technician/solutions/technicianSolutions.component';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';
import { JwtModule } from '@auth0/angular-jwt';
import { AdminAuthGuard } from './guards/admin-auth-guard.service';
import { TechAuthGuard } from './guards/tech-auth-guard.service';
import { companyList } from './views/administration/partials/companyList/companyList.component';
import { employeeForm } from './views/administration/partials/employeeForm/employeeForm.component';
import { ButtonRenderComponent } from './views/administration/partials/button-render/button.render.component';
import { employeeSelectForm } from './views/administration/partials/employeeSelectForm/employeeSelectForm.component';
import { customerForm } from './views/administration/partials/customerForm/customerForm.component';
import { cityStateZipSelector } from './views/administration/partials/cityStateZipSelector/cityStateZip.component';
import { customerCreateModal } from './views/administration/partials/customerCreationModal/customerCreationModal.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { createCustomerForm } from './views/administration/partials/createCustomerForm/createCustomerForm.component';
import { customerUpdateForm } from './views/administration/partials/customerUpdateForm/customerUpdateForm.component';
import { employeeCreateForm } from './views/administration/partials/employeeCreateForm/employeeCreateForm.component';
import { CounterComponent } from './views/common/counter/counter.component';
import { jqxSchedulerComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxscheduler';
import { TaskManagementComponent } from './views/administration/taskManagement/taskManagement.component';
import { TaskManagementHomeComponent } from './views/administration/taskManagement/taskManagementHome/taskManagementHome.component';
import { ToastrModule } from 'ngx-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TaskManagementCategoriesComponent } from './views/administration/taskManagement/taskManagementCategories/taskManagementCategories.component';
import { DemoTechComponent } from './views/technician/demoHome/demoHome.component';
import { AppointmentMaintenance } from './views/technician/appointmentMaintenance/appointmentMaintenance.component';
import { getCompanySalesTax } from './views/administration/partials/getCompanySalesTax/getCompanySalesTax.component';
import { getEmployeeList } from './views/administration/partials/employeeList/employeeList.component';
import { getObservationsList } from './views/administration/partials/ObservationsList/observationsList.component';
import { getCategorySubcategoryList } from './views/administration/partials/CategorySubcategoryList/categorySubcategory.component';
import { ObservationsComponent } from './views/technician/observations/observations.component';
import { FindingsComponent } from './views/technician/findings/findings.component';
import { TechOptionsComponent } from './views/technician/tech-options/tech-options.component';
import { CustomerReviewComponent } from './views/technician/customer-review/customer-review.component';
import { DiscountsComponent } from './views/technician/discounts/discounts.component';
import { MaterialNotesComponent } from './views/technician/material-notes/material-notes.component';
import { TechHomeComponent } from './views/technician/techHome/techHome.component';
import { SalesTaxFormComponent } from './views/administration/partials/salesTaxForm/salesTaxForm.component';
import { environment } from '../environments/environment';
import { AnnouncementsDisplayComponent } from './views/technician/partials/announcements/announcements.component';
import { optionCopyMenuComponent } from './views/technician/partials/optionCopy/optionCopyMenu.component';
import { TechLayoutComponent } from './views/common/techLayout/techLayout.component';
import { AdminLayoutComponent } from './views/common/adminLayout/adminLayout.component';
import { AppointmentDetails } from './views/technician/appointmentDetails/appointmentDetails.component';
import { techHeaderComponent } from './views/technician/partials/techHeader/techHeader.component';
import { DiscountFormComponent } from './views/administration/partials/companyDiscountsForm/discountsForm.component';
import { ServiceChargeFormComponent } from './views/administration/partials/companyServiceChargeForm/serviceChargeForm.component';
import { ObservationListComponent } from './views/technician/partials/observationList/observationList.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

export function jwtTokenGetter() {
  return sessionStorage.getItem("fleetbooks_JWT");
};

@NgModule({
  declarations: [
    AppComponent,
    NavMenuTopComponent,
    LoginComponent,
    AdministrationAnnouncementsComponent,
    AppointmentDetails,
    AdministrationAppointmentsComponent,
    AdministrationArchivesComponent,
    AdministrationCallsComponent,
    AdministrationCompaniesComponent,
    AdministrationCustomersComponent,
    AdministrationEmployeesComponent,
    AdministrationInvoicesComponent,
    AdministrationObservationsComponent,
    AdministrationProblemsComponent,
    AdministrationQuickInvoicesComponent,
    //TechnicianAppointmentsComponent,
    //TechnicianDiscountsComponent,
    //TechnicianHomeComponent,
    //TechnicianInvoicesComponent,
    //TechnicianOptionsComponent,
    //TechnicianProblemsComponent,
    //TechnicianReviewsComponent,
    //TechnicianSolutionsComponent,
    jqxGridComponent,
    jqxSchedulerComponent,
    companyList,
    employeeForm,
    employeeSelectForm,
    employeeCreateForm,
    customerForm,
    cityStateZipSelector,
    createCustomerForm,
    customerUpdateForm,
    customerCreateModal,
    CounterComponent,
    TaskManagementComponent,
    TaskManagementHomeComponent,
    TaskManagementCategoriesComponent,
    DemoTechComponent,
    AppointmentMaintenance,
    getEmployeeList,
    getCompanySalesTax,
    getObservationsList,
    getCategorySubcategoryList,
    ButtonRenderComponent,
    ObservationsComponent,
    FindingsComponent,
    TechOptionsComponent,
    CustomerReviewComponent,
    DiscountsComponent,
    MaterialNotesComponent,
    TechHomeComponent,
    SalesTaxFormComponent,
    AnnouncementsDisplayComponent,
    TechLayoutComponent,
    AdminLayoutComponent,
    optionCopyMenuComponent,
    techHeaderComponent,
    DiscountFormComponent,
    ServiceChargeFormComponent,
    ObservationListComponent,
  ],
  entryComponents: [ButtonRenderComponent],
  imports: [
    Ng2SmartTableModule,
    BrowserModule,
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: jwtTokenGetter,
        whitelistedDomains: [environment.baseUrl],
        blacklistedRoutes: [],
      }
    }),
    NgbModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 3000,
      positionClass: 'toast-top-right',
    }),
    FontAwesomeModule
  ],
  providers: [AdminAuthGuard, TechAuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

我知道它很长，如果需要我可以把所有没用的东西都去掉。如果需要，我也可以 post 我的 package.json。如果我检查元素，我上面链接的代码呈现如下：

<ngb-accordion activeids="ngb-panel-0" class="accordion" role="tablist" ng-reflect-active-ids="ngb-panel-0"></ngb-accordion>

没有控制台错误，没有编译错误，什么都没有。它只是没有出现在页面上，当我去查看检查元素时，我看到的就是这些。

这是我正在寻找参考的教程：https://ng-bootstrap.github.io/#/components/accordion/api

Answer 1

仔细检查您的控制台是否存在可能导致其无法呈现的错误。

Angular 7 NGB 手风琴菜单未呈现

Angular 7 NGB accordion Menu not rendering

angular

accordion

ng-bootstrap