Как реализовать разбиение на страницы в Angular Carbon Design System без использования TableModel?

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