0

Хочу создать свой пагинатор ( на вход количество страниц, на выход этот компонент должен выдавать текущую страницу). Я думал циклом вывести список и посредством ngClass задать условие выбора активного/ пассивного класса. Но как сделать в ангуляре цикл (то есть, *ngFor перебирает массив, а надо же от 0 до N). И на что опираться при выборе активного/ пассивного класса, какой флаг делать?

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

Подскажите, как реализовать (мб мою идею, главное без использования готовых библиотек - bootsrap и тд?

1 ответ 1

1
@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);
    }
}
8
  • Скажите, а как работает данная строчка? Если текущая страница активная (true), то класс активировать. А как указать данный класс? К примеру, мой класс my_class и есть псевдокласс my_class:active? как это будет выглядеть? [class.active]="page === activePage"
    – bruce
    18 июл 2018 в 13:47
  • @bruce, active это и есть класс, так работает атрибутная директива [class] если Вам нужно указать единичный класс, если несколько - тогда в дело идет [ngClass] 18 июл 2018 в 14:18
  • то есть [class.active] таким синтаксисом мы привязываемся с css классом (то есть тот, что в файле стилей мы указали, .active {color: red;})?
    – bruce
    18 июл 2018 в 14:20
  • @bruce, так и есть, вот туториал для новичков metanit.com/web/angular2/3.1.php 18 июл 2018 в 14:21
  • спасибо вам! я имею представление что сделать, но из-за незнания фреймворка не могу осознать как делать. а еще есть какие-нибудь методы реализации? или это самый оптимальный и корректный?
    – bruce
    18 июл 2018 в 14:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.