如何在不使用 TableModel 的情况下在 Angular Carbon 设计系统中实现分页？答案

【问题标题】：How to implement Pagination in Angular Carbon Design System without using a TableModel?如何在不使用 TableModel 的情况下在 Angular Carbon 设计系统中实现分页？
【发布时间】：2020-08-08 06:50:48
【问题描述】：

我们有一个对象数组（纸）。也使用搜索过滤器。

我们在 .html 中的代码：

<ibm-search
    placeholder="Search title"
    (clear)="clearSearch()"
    [(ngModel)]="listFilter"
    >Search</ibm-search>

<ibm-pagination
    [model]="filteredPapers"
    (selectPage)="selectPage($event)">
</ibm-pagination>
...
...
<div ibmRow *ngFor="let paper of filteredPapers">
...
.. display articles here {{ filteredPapers. }}..
...
</div>


in .ts
// Pagination
selectPage(page) {
    console.log('..selectPage', page);
    // implementation..
}

我们如何实现这一点？

我们发现的大多数示例都基于 TableModel，但我们没有表格：

in .html:
<ibm-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-pagination>

in .ts:
import { TableModel, TableHeaderItem, TableItem } from 'carbon-components-angular';
..
model = new TableModel();

【问题讨论】：

标签： angular carbon-design-system

【解决方案1】：

经过足够长时间的工作，能够解决这个问题。发布解决方案：

1：展示

<ibm-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-pagination>
..
...
<div ibmRow *ngFor="let paper of filteredPapers">
    .. {{ show object contents }}
</div>

2：打字稿

import { PaginationModel } from 'carbon-components-angular';
...
...
export class PapersComponent implements OnInit {
    papers: Paper[] = [];
    filteredPapers: Paper[] = [];
    filteredPapersForPagination: Paper[] = [];

    @Input() model = new PaginationModel();
    @Input() skeleton = false;
    @Input() disabled = false;
    @Input() pageInputDisabled = false;
    @Input() pagesUnknown = false;

    @Input() get totalDataLength() {
        return this.model.totalDataLength;
    }
    set totalDataLength(value) {
        this.model.totalDataLength = value;
    }
...
...
    ngOnInit() {
        this.papersService.papersList().subscribe((papers: Paper[]) => {
           this.papers = papers;
           this.filteredPapers = this.papers;
           this.filteredPapersForPagination = this.papers;

           // Set for pagination
           this.model.pageLength = 10;
           this.model.totalDataLength = this.filteredPapersForPagination.length;
           this.selectPage(1);
        });
    }
...
...
    prepareData(data) {
        const newData = [];

        for (const datum of data) {
            newData.push(datum);
        }

        return newData;
    }

    // Pagination
    selectPage(page) {
        this.model.currentPage = page;
        this.model.totalDataLength = this.filteredPapersForPagination.length;

        // manage
        const offset = this.model.pageLength * (page - 1);
        const pageRawData = this.filteredPapersForPagination.slice(offset, offset + this.model.pageLength);

        this.filteredPapers = this.prepareData(pageRawData);
        this.model.currentPage = page;
    }

...

参考资料：

部分实现在分页https://github.com/IBM/carbon-components-angular/tree/master/src/pagination

【讨论】：