Я пытаюсь сделать только следующее меню аккордеона прямо с сайта 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 { }
Я знаю, что это долго, я могу вывезти все ненужные вещи, если это необходимо. Я также могу опубликовать свой пакет. json при необходимости. Код, который я связал выше, выглядит следующим образом, если я проверяю элемент:
<ngb-accordion activeids="ngb-panel-0" class="accordion" role="tablist" ng-reflect-active-ids="ngb-panel-0"><!----></ngb-accordion>
Нет ошибки консоли, ошибки компиляции, ничего. Он просто не появляется на странице, и когда я go смотрю в элемент проверки, это все, что я вижу.
Это учебник, который я искал для справки: https://ng-bootstrap.github.io/# / компоненты / аккордеон / апи