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

Question

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

这是我的 ListViewPageModule，我在其中导入了 JwPagingationModule：

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：如何在我的组件中正确包含分页？在我的 ngOnInit() 中，我也必须集成分页或者？

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

Answer 1

根据文档，您应该像这样将数据作为项目属性提供：

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

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

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

How do I implement paging (JwPaginationModule) in my Ionic app?

css

paging

ionic-framework

angular