0

我是 Angular 的新手，我没有花费数小时试图让分页正常工作。我在 Angular 9 中工作。

在 app.module 我导入 ngx-pagination

从'ngx-pagination'导入{ NgxPaginationModule }；

在 home-component 中，我建立了一个来自网络服务的海报列表。 

    <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>

如果我将 id 留在分页语句中，我会在寻呼机栏中看到“Next >>”，而没有其他任何内容。它当然是不可点击的。
如果我删除分页语句中的 id，我会看到寻呼栏编号，并且“1”以蓝色突出显示。但是，选择任何其他数字不会导致 onPageChange 事件触发（它只记录到控制台），也不会导致突出显示“1”以外的任何内容。我错过了什么吗？

更新 我在这方面取得了一些进展。我尝试在当前代码上方添加第二个 ngfor / page bar 块，它运行良好。当我更改页面时，新寻呼机中的数据会正确移动。奇怪的是，在删除 ID 属性后，页面也会在当前（损坏的）寻呼机中移动。但是，我仍然无法直接单击该寻呼机。

          <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>
4

0 回答 0