错误：找不到管道“分页”！在 Angular 11 中使用 Ngx 分页答案

【问题标题】：Error: The pipe 'paginate' could not be found! with Ngx-pagination in Angular 11错误：找不到管道“分页”！在 Angular 11 中使用 Ngx 分页
【发布时间】：2021-04-22 23:53:50
【问题描述】：

我正在使用 Angular 11 并尝试实现分页

HTML

 <tbody>
              <tr *ngFor="let order of orders | paginate: config;let i = index">
                <th scope="row" style="display:none;">{{ i + 1 }}</th>
                <td>{{ order.Code }}</td>
                <td>{{ order.quantity }}</td>
              </tr>
           </tbody>
          </table>
          <pagination-controls id="basicPaginate" (pageChange)="pageChanged($event)"></pagination-controls>

app.module.ts

.....

import { NgxPaginationModule } from 'ngx-pagination';


  imports: [
    .......
    RouterModule.forRoot(AppRoutes,{
      useHash: true
    }),
    .......
    NgxPaginationModule
    
  ]

订单组件

export class OrderComponent implements OnInit {

orders : Order [] = [];
config:any;


  constructor(private orderService : OrderService {
    this.config = {
      id: 'basicPaginate',
      itemsPerPage: 5,
      currentPage: 1,
      totalItems: 50
    };
  }
ngOnInit(){
//web service ok
    this.orderService.getAllOrders(30,5,0).pipe(first()).subscribe(orders => this.orders = orders);

  }


  
  pageChanged(event) {
    this.config.currentPage = event;
  }


}

项目编译成功

那么为什么会出现这个错误呢？我只想要基本的分页而不是自定义的分页。 Angular 11 是否存在兼容性问题？

【问题讨论】：

如果您在延迟加载的模块中使用它，您需要在该模块中导入NgxPaginationModule 而不是应用程序模块

标签： html angular typescript angular11 ngx-pagination

【解决方案1】：

转到您的OrderComponent 导入的模块文件yourModuleName.module.ts 并添加以下代码

import { NgxPaginationModule } from 'ngx-pagination'; // At the top of your module
.
.
.
@NgModule({
  imports: [
    CommonModule,
    NgxPaginationModule // Add this line of code here
  ],

重新编译你的项目，它就可以正常工作了

【讨论】：

【解决方案2】：

希望您找到解决问题的方法。这个问题刚刚发生在我身上，我通过在导入数组的最顶部导入 NgxPaginationModule 来解决它。之后，保留项目。它可能会起作用。如果没有，只需卸载并重新安装 ngx 分页。

this is an image to show the position of the module in the imports array in my project

【讨论】：

【解决方案3】：

如果我是你，我会检查你是否已经正确地将 NgxPagination 模块导入到你正在使用它的模块中，如果你将它导入到一个模块中，请确保你正在使用的模块正在导入您正在使用的模块。例如：

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxPaginationModule } from 'ngx-pagination'; //Imports NgxPaginationModule 

@NgModule({
  declarations: [],
  imports: [CommonModule, NgxPaginationModule ],
  exports: [CommonModule, NgxPaginationModule], // Exports NgxPaginationModule 
})
export class SharedModule {}

为了在以下模块中使用它，您必须导入第 7 行（带有注释的行）中表示的 SharedModule

product-feature.module.ts

import { NgModule } from '@angular/core';
import { ProductComponent } from '../product/product.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [ProductComponent],
  imports: [SharedModule], //must import SharedModule
  exports: [ProductComponent],
})
export class ProductsFeatureModule {}

【讨论】：

【解决方案4】：

这似乎是一个 VS Code（假设您使用它）故障。只需重新启动 IDE 并重试。

PS：如果您的 OrderComponent 位于不同的模块中，那么您还需要在该模块的导入部分中使用 NgxPaginationModule。

【讨论】：