如何在 Angular 4 中为表格添加分页？

Question

我是 Angular 4 的新手，如果有人能告诉我如何在表格中添加分页，我将不胜感激。下面是我的代码：

HTML:

 <div *ngIf="tableDiv && adv1" id="adv1Div">
            <table class="table table-hover" id="adv1Table">
                <thead>
                    <tr class="black-muted-bg" >
                        <th class="align-right" *ngFor="let data of calendarTable[0].weeks">{{data.period}}</th>

                    </tr>
                </thead>
                <tbody>
                    <tr class="no-top-border" *ngFor="let item of calendarTable| paginate: { itemsPerPage: 9, currentPage: p };">
                        <td contenteditable='true' *ngFor="let data of item.weeks| paginate: { itemsPerPage: 9, currentPage: p };" class="align-right">{{data.price}}</td>
                    </tr>
                </tbody>
                <a href="javascript:void(0)">
                    {{p}}
                  </a>

            </table>

        </div>

我的 JSON 是：

  public calendarTable = [
      { name: "TV AD1",
          weeks: [
          { period: "2/10/2017", price: "400" },
          { period: "9/10/2017", price: "800" },
          { period: "16/10/2017", price: "200" },
          { period: "23/10/2017", price: "500" },
          { period: "30/10/2017", price: "600" },
          { period: "6/11/2017", price: "800" },
          { period: "13/11/2017", price: "700" },
          { period: "20/11/2017", price: "800" },
          { period: "27/11/2017", price: "900" },
          { period: "4/12/2017", price: "400" },
          { period: "11/12/2017", price: "800" },
          { period: "18/12/2017", price: "200" },
          { period: "25/12/2017", price: "500" },
          { period: "1/1/2018", price: "600" },
          { period: "8/1/2018", price: "800" },
          { period: "15/1/2018", price: "700" },
          { period: "22/1/2018", price: "800" },
          { period: "29/1/2018", price: "900" }
          ]

          }
   ]

我想在表格中每页添加 5 个项目。请在这方面帮助我。

原文由 Neha Uniyal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可以在 此处 找到为 Angular 4 安装 ngx-pagination 的简单解决方案。您只需将它导入您的 ngModule 并在您的 component.ts 中将页面索引声明为 p: number = 1; 。

在表格下方找到分页元素，如下所示：

 <pagination-controls (pageChange)="p = $event"></pagination-controls>

声明要在 *ngFor 中显示的行数 //:

 <tr *ngFor="let game of games | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">

希望对你有帮助！

原文由 Mnemo 发布，翻译遵循 CC BY-SA 3.0 许可协议