如何使用 ngx-pagination 对 ionic4 应用程序中的数据进行分页？

Question

我按照此页面（https://www.npmjs.com/package/ngx-pagination）的命令将ngx-pagination放入我的离子应用程序。我收到此错误。似乎ngx-pagination包没有安装成功。还有其他解决方案吗？

错误： core.js:15724 错误错误：未捕获（承诺）：错误：模板解析错误： 'pagination-controls' 不是已知元素： 1.如果'pagination-controls'是一个Angular组件，那么验证它是这个模块的一部分。 2. 如果 'pagination-controls' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以禁止显示此消息。 （“[错误->]”）：ng:///LoginPageModule/MenuPage.html@116:27 错误：模板解析错误： 'pagination-controls' 不是已知元素： 1.如果'pagination-controls'是一个Angular组件，那么验证它是这个模块的一部分。 2. 如果 'pagination-controls' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以禁止显示此消息。 ("[错误->]

app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import {HttpClientModule} from '@angular/common/http';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import {IonicStorageModule} from '@ionic/storage';
import {FormsModule} from '@angular/forms';
import {IonicSelectableModule} from 'ionic-selectable';
import {NgxPaginationModule} from 'ngx-pagination';


import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {EditCustomerPage} from './pages/edit-customer/edit-customer.page';


// import {MenuPage} from './pages/menu/menu.page';


@NgModule({
  declarations: [AppComponent, EditCustomerPage],
  entryComponents: [EditCustomerPage],
  imports: [ BrowserModule, IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    IonicStorageModule.forRoot(),
    FormsModule,
    NgxPaginationModule,
    IonicSelectableModule,

    ],
  providers: [
    StatusBar,
    SplashScreen,

    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],

})
export class AppModule {}

menu.page.html

<pagination-controls (pageChange)="p = $event"></pagination-controls>

menu.module.ts

import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import {IonicSelectableModule} from 'ionic-selectable';
import {NgxPaginationModule} from 'ngx-pagination';


import { IonicModule } from '@ionic/angular';
import {ModalController} from '@ionic/angular';
import {EditCustomerPageModule} from '../edit-customer/edit-customer.module';



// import { MenuPage } from './menu.page';

const routes: Routes = [
  // {
  //   path: 'menu',
  //   component: MenuPage,
  //   children : [
  //     { path: 'first',
  //       loadChildren: '../first/first.module#FirstPageModule' },
  //     { path: 'second',
  //       loadChildren: '../second/second.module#SecondPageModule' },
  //   ]
  // },
  {
    path : '',
    redirectTo : '/menu'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NgxPaginationModule,
    IonicModule,
    RouterModule.forChild(routes),
    EditCustomerPageModule,
    IonicSelectableModule,

      ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  declarations: [],
  providers: [
      ModalController
  ],

})
export class MenuPageModule {}

Answer 1

看起来您正在延迟加载菜单页面。在这种情况下，您必须在menu.module.ts 中导入NgxPaginationModule

注意：确保您的组件在您导入 NgxPaginationModule 的同一模块中声明