html - Feil: Pipe 'paginate' kunne ikke bli funnet! med Ngx-pagination i Angular 11

Jeg bruker Angular 11 og prøver å implementere paginering

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.modul.ts

.....

import { NgxPaginationModule } from 'ngx-pagination';


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

Ordrekomponent

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;
  }


}

Prosjektet kompilerer ok

Så hvorfor oppstår denne feilen? Jeg vil kun ha den grunnleggende pagineringen og ikke den tilpassede. Er det et kompatibilitetsproblem med Angular 11?

Svar #1

  1. Gå til filen for din OrderComponent importerte modul yourModuleName.module.ts og legg til følgende kode

import { NgxPaginationModule } from 'ngx-pagination'; // At the top of your module
.
.
.
@NgModule({
  imports: [
    CommonModule,
    NgxPaginationModule // Add this line of code here
  ],
  1. Kompiler prosjektet ditt på nytt, så vil det fungere fint

Svar #2

Hvis jeg var deg, ville jeg sjekket om du har importert NgxPagination-modulen riktig til modulen der du bruker den, hvis du har importert den til en modul, sørg for at modulen du bruker importerer modulen du bruker. For eksempel:

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

for å bruke det i den følgende modulen må du importere SharedModule som angitt i linje 7 (linjen med kommentaren)

produkt-funksjon.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 {}

Relaterte artikler