錯誤：找不到 pipe '分頁'！ 在 Angular 11 中使用 Ngx 分頁

Question

我正在使用 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 是否存在兼容性問題？

Answer 1

我希望您找到解決問題的方法。 這個問題剛剛發生在我身上，我通過在導入數組的最頂部導入 NgxPaginationModule 來修復它。 之后，保留項目。 它可能會起作用。 如果沒有，只需卸載並重新安裝 ngx 分頁。

這是在我的項目的導入數組中顯示模塊的 position 的圖像

Answer 2

如果我是您，我會檢查您是否已將 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（帶有注釋的行）

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

Answer 3

這似乎是一個 VS Code（假設你使用它）故障。 只需重新啟動您的 IDE 並重試。

PS：如果您的 OrderComponent 位於不同的模塊中，那么您還需要在該模塊的導入部分中使用NgxPaginationModule 。

Answer 4

1. Go 到您的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. 重新編譯您的項目，它將正常工作