Ручная нумерация страниц в angular 9 - PullRequest
Новая
       14

Ручная нумерация страниц в angular 9

0 голосов
/ 27 марта 2020

Добрый день,

Я пытаюсь разбить на страницы список из 11 элементов (массив), по 3 на страницу. Когда страница загружается, она печатает мне первую страницу с item1, item2 и item3, но когда я нажимаю кнопку «следующая страница», она меняет нумерацию страниц в нижнем колонтитуле, но не меняет содержимое страницы (она должна заполнять страницу следующими 3 элементами).

Есть ли у кого-нибудь идеи о том, как изменить отображаемые элементы после нажатия на «предыдущую» или «следующую» страницу?

Мне нужно снова заполнить страницу после нажатия, но Я не знаю точно, что мне нужно.

Я знаю, что могу сделать это с некоторыми библиотеками, но я хочу сделать это вручную, чтобы получить лучшие навыки по Angular (я действительно новичок). 

    import { Component, OnInit } from '@angular/core';

// Import Shops array
import { SHOPS } from '../shops-array';

@Component({
  selector: 'app-shop-list',
  templateUrl: './shop-list.component.html',
  styleUrls: ['./shop-list.component.css']
})
export class ShopListComponent implements OnInit {

  // Properties here

  // Assign shops array from shops interface
  shops = SHOPS;

  // Properties to control pagination.
  currentPage = 0;
  shopsPerPage = 3;
  pageCount = Math.ceil(this.shops.length / this.shopsPerPage); // Total pages we will have.

  // Handle events for previous and next page.
  changePage(event: Event) {

    if(event){
      this.currentPage-- ;
    }else{
      this.currentPage++;
    }
  }

  constructor() { }

  ngOnInit(): void {
    // this.createShopArray()

  }
}

СЕЙЧАС HTML кнопки div 

<!-- Pagination ( X SHOPS PER PAGE) -->
  <div>
    <ul>
      <li>
        <!-- PREVIOUS BUTTON , disabled if page is first one // go one page before if clicking.-->
        <button (click)="changePage($prev)" type="button" ng-disabled="currPage == 0" ng-click="currentPage=currentPage-1">
          PREVIOUS PAGE
        </button>
        <span> Page {{currentPage +1}} of {{ pageCount }}</span>
        <!-- NEXT BUTTON , disabled if page is last one // go one page after if clicking.-->
        <button (click)="changePage($next)" type="button" ng-disabled="currentPage >= pageCount - 1" ng-click="currentPage=currentPage+1">
          NEXT PAGE
        </button>
      </li>
    </ul>
  </div>
...