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

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

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

... []]]]]]

仔细检查您的控制台，查看可能导致其无法呈现的错误。

Answer 1

仔细检查您的控制台，查看可能导致其无法呈现的错误。