如何在我的 Ionic 应用程序中实现分页 (JwPaginationModule)？答案

【问题标题】：How do I implement paging (JwPaginationModule) in my Ionic app?如何在我的 Ionic 应用程序中实现分页 (JwPaginationModule)？
【发布时间】：2021-11-20 11:53:00
【问题描述】：

我有一个汽车清单。现在我想集成分页，因为记录很多。

这是我导入 JwPagingModule 的 ListViewPageModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { JwPaginationModule } from 'jw-angular-pagination';
import { IonicModule } from '@ionic/angular';
import { ListViewPageRoutingModule } from './list-view-routing.module';
import { ListViewPage } from './list-view.page';
import { ComponentsModule } from '../components.module';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ComponentsModule,
    ListViewPageRoutingModule,
    JwPaginationModule
  ],
  declarations: [ListViewPage]
})
export class ListViewPageModule {}

我的组件：

@Component({
  selector: 'app-list-view',
  templateUrl: './list-view.page.html',
  styleUrls: ['./list-view.page.scss'],
})
export class ListViewPage implements OnInit {

  structureGroups: StructureGroup[] = [];
  lablesHeadlines = lablesHeadlines;
  headlines = lablesHeadlines;
  pageOfItems: Array<any>;

  constructor(private listClientService: ListClientServiceService, private router: Router) { }

  ngOnInit() {
    this.listClientService.getAllCarGroupNamesWithId().subscribe(
      (response) => {
        this.carGroups = response;
        return response;
      });
  }

  openCarGroup(id: number) {
    this.router.navigate(['/detail-view', { carGroupId: id }]);
  }
  onChangePage(pageOfItems: Array<any>) {
    // update current page of items
    this.pageOfItems = pageOfItems;
  }

}

我的 HTML：

1 <ion-content>
2   <ion-list id="list">
3     <ion-item id="list-item" button *ngFor="let carGroup of carGroups" 
4 (click)="openCarGroup(carGroup.id)">
5      <ion-label>{{carGroup.carGroupName}}</ion-label>
6    </ion-item>
7  </ion-list>
8  <div class="card-footer pb-0 pt-3">
9    <jw-pagination [carGroups]="carGroups" (changePage)="onChangePage($event)"></jw-pagination>
10 </div>
</ion-content>

我的 CSS

.card-footer{
    width: 100%;
    height: 10%;
    position: absolute;
    bottom: 10px;
}

不幸的是，在使用 ionic 和 Angular 时，我仍然非常缺乏经验。目前我收到错误：

NG0303: Can't bind to 'carGroups' since it isn't a known property of 'jw-pagination'.

这个错误来自我的 HTML 文件第 9 行。

问题 1：如何修复错误？

问题 2：如何在我的组件中正确包含 Pagination？在我的 ngOnInit() 中，我还必须集成 Pagination 还是？

问题 3： 目前我得到“” 不显示。 div 在页面末尾有所需的区域，但我在那里看不到 PageController。如何让它可见？

【问题讨论】：

标签： css angular ionic-framework paging

【解决方案1】：

根据文档，您应该将数据作为 items 属性提供，如下所示：

<jw-pagination [items]="carGroups" (changePage)="onChangePage($event)"></jw-pagination>

本指南可能会有所帮助。 https://edupala.com/how-to-implement-ionic-table-with-pagination/

【讨论】：

感谢您的快速回复。现在 PageController 显示正确。现在我将正确设置元素的样式
不客气。如果这解决了您的问题，请接受为正确答案。