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

Question

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

我们在 .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();

Answer 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;
    }

...

参考：

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