1

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

4

4 回答 4

2
  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
  ],

  1. 重新编译您的项目，它将正常工作
于 2021-09-02T14:11:02.333 回答
0

如果我是您，我会检查您是否已将 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 {}
于 2021-07-16T19:43:30.287 回答
0

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

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

于 2021-08-06T11:18:33.843 回答
0

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

这是显示模块在我的项目中导入数组中的位置的图像

于 2021-04-06T12:21:21.053 回答