主页 / 问题 / 857169
Accepted
bruce
Asked:2020-07-18 20:15:18 +0000 UTC2020-07-18 20:15:18 +0000 UTC

在 angural4 上创建自己的分页器

  • 772

我想创建自己的分页器（作为输入的页数，这个组件应该输出当前页面作为输出）。我想在循环中显示列表并设置使用 ngClass 选择主动/被动类的条件。但是如何在angular中做一个循环（即*ngFor遍历一个数组，但必须是从0到N）。以及在选择主动/被动类时要依靠什么，要做什么标志？

<ul>
<li *ngFor="как-то 0 to N" ngClass = "{'active': '!какой-нибудьФлаг', 'passive': 'какой-нибудьФлаг'}"> </li>
</ul>

告诉我如何实现（mb我的想法，最重要的是不使用现成的库 - bootsrap 等？

html

1 个回答

  1. Best Answer
    @Component({
    selector: 'app-some-component',
    template: `
        <div *ngFor="let data of pagedData">
            {{ data }}
        </div>

        <div *ngFor="let page of pages" (click)="paginate(page)" [class.active]="page === activePage">
            {{ page }}
        </div>
    `
})
export class SomeComponent {
    // Оригинальные данные, могут быть получены через API
    // Immutable
    public data: any[] = [];

    // Кол-во элементов на страницу
    public itemsPerPage = 10;

    // Кол-во страниц
    public pagesCount = Math.ceil(this.data.length / this.itemsPerPage);

    // Создаем численный массив, основанный на количестве страниц
    // если `pageCount = 5`, то `pages = [1, 2, 3, 4, 5]` и тд.
    public pages: number[] = Array.from({
        length: this.pagesCount
    }).map((_, i) => i += 1);

    // Пагинированные данные
    public pagedData: any[] = this.data.slice(0, this.itemsPerPage);

    // Текущая выбранная страница
    public activePage = 1;

    public paginate(page: number): void {
        // Если юзер кликнул на ту же страницу - выходим из функции
        if (this.activePage === page) {
            return;
        }

        this.activePage = page;

        this.pagedData = this.data.slice(this.itemsPerPage * page - this.itemsPerPage, this.itemsPerPage * page);
    }
}
    • 1

相关问题