Ionic应用如何正确集成JwPaginationModule实现分页功能

问题1：报错修复方法 #

报错原因是jw-pagination组件的输入属性不叫carGroups，该组件的标准全量数据输入属性为items，同时你组件类中未声明carGroups变量，两步修复即可：

1. 给组件类补充carGroups变量声明，在类的属性区域添加代码：

carGroups: StructureGroup[] = [];

2. 将HTML第9行的[carGroups]="carGroups"修改为[items]="carGroups"

问题2：分页功能正确集成方式 #

不需要在ngOnInit中添加额外的分页逻辑，按以下步骤调整即可：

• 模块侧你已经正确配置了JwPaginationModule，无需修改
• 你当前*ngFor循环的是全量的carGroups，分页不会生效，需要把循环对象换成分页返回的pageOfItems，调整HTML第3行代码：

<ion-item id="list-item" button *ngFor="let carGroup of pageOfItems" (click)="openCarGroup(carGroup.id)">

• 异步加载数据时可以加可选的空数据判断，避免分页组件提前渲染空状态：给jw-pagination标签加*ngIf="carGroups.length > 0"

问题3：分页组件不显示的修复方法 #

按优先级排查以下几点即可：

1. 先完成问题1、问题2的修改，属性错误、空数据都会导致组件不渲染
2. 测试数据量要大于分页阈值：jw-pagination默认每页显示10条数据，如果你的carGroups总条数小于10，分页组件默认不会显示，可以手动修改每页条数，比如在标签上加[pageSize]="5"调整为每页5条
3. 修复样式冲突：

• 给ion-list加底部内边距，避免列表内容盖住分页栏：

ion-list {
  padding-bottom: 80px;
}

• 强制分页组件渲染样式，避免被Ionic默认样式覆盖：

jw-pagination {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0;
}

内容的提问来源于stack exchange，提问作者Doncarlito87