错误类型错误："_co.pagination is undefined"和错误上下文正在使用 NGX-Bootstrap 分页引发

Question

我正在尝试使用NGX引导分页来将其引入我的angular项目。当我运行应用程序时，控制台会显示此错误。

自从我使用PostMan进行测试以来，我知道后端工作正常。一旦我将分页添加到HTML中，问题就会出现。特别是当我试图绑定像[totalItems]="pagination.totalItems"这样的值时。一旦添加这些值，页面就会中断，并引发错误。

成员列表组件

import { Component, OnInit } from '@angular/core';
import { UserService } from '../../_services/user.service';
import { AlertifyService } from '../../_services/alertify.service';
import { ActivatedRoute } from '@angular/router';
import { Pagination, PaginatedResult } from 'src/app/_models/pagination';
import { User } from 'src/app/_models/user';

@Component({
selector: 'app-member-list',
templateUrl: './member-list.component.html',
styleUrls: ['./member-list.component.css']
})
export class MemberListComponent implements OnInit {
users: User[];
pagination: Pagination;
constructor(private userService: UserService, private alertify: AlertifyService,
private route: ActivatedRoute) { }
ngOnInit() {
this.route.data.subscribe(data => {
this.users = data['users'].result;
this.pagination = data['users'].pagination;
});
}
pageChanged(event: any): void {
this.pagination.currentPage = event.page;
}
}

会员列表html

<div class="container mt-5">
<div class="row">
<div *ngFor="let user of users" class="col-lg-2 col-md-3 col-sm-6">
<app-member-card [user]="user"></app-member-card>
</div>
</div>

<div class="d-flex justify-content-center">
<pagination
[boundaryLinks]="true"
[totalItems]="pagination.totalItems"
[(ngModel)]="pagination.currentPage"
[itemsPerPage]="pagination.itemsPerPage"
(pageChanged)="pageChanged($event)"
previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;">
</pagination>
</div>

应用程序模块

import { BrowserModule, HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { NgxGalleryModule } from 'ngx-gallery';
import { PaginationModule } from 'ngx-bootstrap/pagination';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { ModalModule } from 'ngx-bootstrap/modal';
import {BsDatepickerModule} from 'ngx-bootstrap/datepicker';
import {BsDropdownModule} from 'ngx-bootstrap/dropdown';
import {NgxPaginationModule} from 'ngx-pagination';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { AuthService } from './_services/auth.service';
import { HomeComponent } from './home/home.component';
import { RegisterComponent } from './register/register.component';
import { ErrorInterceptorProvider } from './_services/error.interceptor';
import { ListsComponent } from './lists/lists.component';
import { MessagesComponent } from './messages/messages.component';
import { appRoutes } from './routes';
import { CommonModule } from '@angular/common';
import { MemberListComponent } from './members/member-list/member-list.component';
import { MemberCardComponent } from './members/member-card/member-card.component';
import { AlertifyService } from './_services/alertify.service';
import { AuthGuard } from './_guards/auth.guard';
import { UserService } from './_services/user.service';
import { MemberDetailComponent } from './members/member-detail/member-detail.component';
import { MemberDetailResolver } from './_resolvers/member-detail.resolver';
import { MemberListResolver } from './_resolvers/member-list.resolver';
import { JwtModule } from '@auth0/angular-jwt';
import { MemberEditComponent } from './members/member-edit/member-edit.component';
import { MemberEditResolver } from './_resolvers/member-edit.resolver';
import { PreventUnsavedChanges } from './_guards/prevent-unsaved-changes.guard';
import { PhotoEditorComponent } from './members/photo-editor/photo-editor.component';
import { FileUploadModule } from 'ng2-file-upload';

export function tokenGetter() {
return localStorage.getItem('token');
}
export class CustomHammerConfig extends HammerGestureConfig {
overrides = {
pinch: {enable: false},
rotate: {enable: false}
};
}
@NgModule({
declarations: [
AppComponent,
NavComponent,
HomeComponent,
RegisterComponent,
MemberListComponent,
ListsComponent,
MessagesComponent,
MemberCardComponent,
MemberDetailComponent,
MemberEditComponent,
PhotoEditorComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
BsDatepickerModule.forRoot(),
PaginationModule.forRoot(),
RouterModule.forRoot(appRoutes),
NgxGalleryModule,
ModalModule.forRoot(),
FileUploadModule,
NgxPaginationModule,
JwtModule.forRoot({
config: {
tokenGetter,
whitelistedDomains: ['localhost:5000'],
blacklistedRoutes: ['localhost:5000/api/auth']
}
})
],
providers: [
AuthService,
ErrorInterceptorProvider,
AlertifyService,
AuthGuard,
UserService,
MemberDetailResolver,
MemberListResolver,
MemberEditResolver,
PreventUnsavedChanges,
{ provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig}
],
bootstrap: [
AppComponent
]
})
export class AppModule { }

分页模型

export interface Pagination {
currentPage: number;
itemsPerPage: number;
totalItems: number;
totalPages: number;
}
export class PaginatedResult<T> {
result: T;
pagination: Pagination;
}

任何帮助都将不胜感激！

我添加了一个控制台日志来查看发生了什么。

ngOnInit() {
this.route.data.subscribe(data => {
this.users = data['users'].result;
console.log(this.users);
this.p = data['users'].pagination;
console.log(this.p);
console.log(this.users);
});
}

当我看到console.log((时，它说p(分页(是未定义的

Answer 1

可能是因为pagination只在ngOnInit()中分配，但组件试图在之前访问它

在变量初始化后，只尝试渲染组件

<pagination *ngIf="pagination"
...