Angular 7 NGB 手风琴菜单未呈现

Question

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

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

我知道它很长，如果需要，我可以取出所有无用的东西。如果需要，我也可以发布我的 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

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