问题描述
我正在使用 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 来修复它。之后,保留项目。它可能会起作用。如果没有,只需卸载并重新安装 ngx 分页。
this is an image to show the position of the module in the imports array in my project
,如果我是你,我会检查你是否将 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 {}
为了在以下模块中使用它,您必须导入 SharedModule,如第 7 行(带注释的行)所示
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 {}
,
这似乎是 VS Code(假设您使用它)的故障。只需重新启动您的 IDE 并重试。
PS:如果您的 OrderComponent 位于不同的模块中,那么您还需要在该模块的导入部分中使用 NgxPaginationModule
。