Angular: попытка заставить работать ngx-нумерацию - PullRequest
Новая
       27

Angular: попытка заставить работать ngx-нумерацию

0 голосов
/ 24 апреля 2020

Я новичок в Angular, и у меня нет потраченных часов, пытаясь заставить нумерацию страниц работать правильно. Я работаю в Angular 9.

в app.module. Я импортирую ngx-pagination

import {NgxPaginationModule} из 'ngx-pagination';

в home- У меня есть компонент, который я создал список постеров из веб-службы. 

    <div class="movie-card" *ngFor="let media of filteredMovies | paginate: {
      id: 'pagingID',
      itemsPerPage: 1,
      currentPage: page,
      totalItems: totalRecords }">
        <div
         Some html
         </div>

      </div>
      <!--movie-card-->

      <pagination-controls> id="pagingID" (pageChange)="onPageChange($event)") </pagination-controls>

Если я оставляю идентификатор в выражении paginate , я вижу "Next >>" и ничего больше в панели пейджера. Это, конечно, не кликабельно.
Если я удаляю идентификатор в выражении paginate Я вижу номера панели пейджера и с "1", подсвеченным синим. Однако выбор любого другого номера не приводит к срабатыванию события onPageChange (он только регистрируется в консоли) и не приводит к выделению чего-либо, кроме «1». Я что-то пропустил?

ОБНОВЛЕНИЕ Я достиг определенного прогресса в этом. Я попытался добавить второй блок ngfor / page bar над моим текущим кодом, и он отлично работает. Когда я меняю страницы, данные в новом пейджере меняются правильно. Странно то, что после удаления свойства идентификатора страница также перемещается в текущем (поврежденном) пейджере. Тем не менее, я до сих пор не могу нажать на этот пейджер напрямую. 

          <div *ngFor="let media of filteredMovies | paginate: { itemsPerPage: 2, currentPage: page }">{{ media.movie.title }}</div>
            <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>

            <!-- This is the ORIGINAL block-->
            <div *ngIf="isMovie">
            <div *ngFor="let media of filteredMovies | paginate: {itemsPerPage: 2, currentPage: page }">
              some html
            <pagination-controls> (pageChange)="onPageChange($event)") </pagination-controls>
...