テーブルの角度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つの項目を追加したいです。この点で私を助けてください。

Answer 1

必要に応じて、角度データテーブルを使用できます。ドキュメントについて

：

https://www.npmjs.com/package/angular2-datatable

Answer 2

チュートリアルhere

を確認することができますし、デモにhere

アップデートを見つけることができます： - チェックhere

UPDATE 2： -
上記チュートリアル実際に持っているこの基本論理 -
1）。一度に最大10個のリンクが表示されます。
2）。アクティブなページが最後の位置から5以上または4未満の場合、アクティブなlikeは6番目のポジションです。

（再利用することができるようにするサービスとして追加）ページ付けロジック： - ページネーション・サービスを使用

import * as _ from 'underscore'; 

export class PagerService { 
    getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) { 
     // calculate total pages 
     let totalPages = Math.ceil(totalItems/pageSize); 

     let startPage: number, endPage: number; 
     if (totalPages <= 10) { 
      // less than 10 total pages so show all 
      startPage = 1; 
      endPage = totalPages; 
     } else { 
      // more than 10 total pages so calculate start and end pages 
      if (currentPage <= 6) { 
       startPage = 1; 
       endPage = 10; 
      } else if (currentPage + 4 >= totalPages) { 
       startPage = totalPages - 9; 
       endPage = totalPages; 
      } else { 
       startPage = currentPage - 5; 
       endPage = currentPage + 4; 
      } 
     } 

     // calculate start and end item indexes 
     let startIndex = (currentPage - 1) * pageSize; 
     let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1); 

     // create an array of pages to ng-repeat in the pager control 
     let pages = _.range(startPage, endPage + 1); 

     // return object with all pager properties required by the view 
     return { 
      totalItems: totalItems, 
      currentPage: currentPage, 
      pageSize: pageSize, 
      totalPages: totalPages, 
      startPage: startPage, 
      endPage: endPage, 
      startIndex: startIndex, 
      endIndex: endIndex, 
      pages: pages 
     }; 
    } 
} 

コンポーネント： -

import { Component, OnInit } from '@angular/core'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map' 

import * as _ from 'underscore'; 

import { PagerService } from './_services/index' 

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    templateUrl: 'app.component.html' 
}) 

export class AppComponent implements OnInit { 
    constructor(private http: Http, private pagerService: PagerService) { } 

    // array of all items to be paged 
    private allItems: any[]; 

    // pager object 
    pager: any = {}; 

    // paged items 
    pagedItems: any[]; 

    ngOnInit() { 
     // get dummy data 
     this.http.get('./dummy-data.json') 
      .map((response: Response) => response.json()) 
      .subscribe(data => { 
       // set items to json response 
       this.allItems = data; 

       // initialize to page 1 
       this.setPage(1); 
      }); 
    } 

    setPage(page: number) { 
     if (page < 1 || page > this.pager.totalPages) { 
      return; 
     } 

     // get pager object from service 
     this.pager = this.pagerService.getPager(this.allItems.length, page); 

     // get current page of items 
     this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1); 
    } 
} 

HTMLテンプレート： -

<div> 
    <div class="container"> 
     <div class="text-center"> 
      <h1>Angular 2 - Pagination Example with logic like Google</h1> 

      <!-- items being paged --> 
      <div *ngFor="let item of pagedItems">{{item.name}}</div> 

      <!-- pager --> 
      <ul *ngIf="pager.pages && pager.pages.length" class="pagination"> 
       <li [ngClass]="{disabled:pager.currentPage === 1}"> 
        <a (click)="setPage(1)">First</a> 
       </li> 
       <li [ngClass]="{disabled:pager.currentPage === 1}"> 
        <a (click)="setPage(pager.currentPage - 1)">Previous</a> 
       </li> 
       <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}"> 
        <a (click)="setPage(page)">{{page}}</a> 
       </li> 
       <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}"> 
        <a (click)="setPage(pager.currentPage + 1)">Next</a> 
       </li> 
       <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}"> 
        <a (click)="setPage(pager.totalPages)">Last</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

アップデート3： -
簡単な方法...私はあなたが複数のボタン

@Component({ 
     selector: 'my-app', 
     template:` 
        <div> 
         <h5>TV ADS</h5> 

           <ul> 
            <li *ngFor="let item of calendarTableSelected.weeks"> 
            <span>{{item.period}}</span> 
            </li> 
           </ul> 
        </div> 
        <div> 
         <button (click)="update()">change</button> 
        </div> 
       ` 
    }) 
    export class SomeComponent { 
       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" } 
      ] 
     }, 
     { name: "TV AD2", 
      weeks: [ 
      { period: "2/10/2017", price: "500" }, 
      { period: "9/10/2017", price: "600" }, 
      { period: "16/10/2017", price: "700" }, 
      { period: "23/10/2017", price: "800" }, 
      { period: "30/10/2017", price: "900" }, 
      { period: "6/10/2017", price: "100" }, 
      { period: "13/10/2017", price: "200" }, 
      { period: "20/10/2017", price: "300" }, 
      { period: "27/10/2017", price: "400" }, 
      { 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" } 
      ] 
      }, 

     { name: "TV AD3", 
      weeks: [ 
      { period: "2/10/2017", price: "500" }, 
      { period: "9/10/2017", price: "600" }, 
      { period: "16/10/2017", price: "700" }, 
      { period: "23/10/2017", price: "800" }, 
      { period: "30/10/2017", price: "900" }, 
      { period: "6/10/2017", price: "100" }, 
      { period: "13/10/2017", price: "200" }, 
      { period: "20/10/2017", price: "300" }, 
      { period: "27/10/2017", price: "400" }, 
      { 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" } 
      ] 
      }, 

     { name: "TV AD4", 
     weeks: [ 
      { period: "2/10/2017", price: "500" }, 
      { period: "9/10/2017", price: "600" }, 
      { period: "16/10/2017", price: "700" }, 
      { period: "23/10/2017", price: "800" }, 
      { period: "30/10/2017", price: "900" }, 
      { period: "6/10/2017", price: "100" }, 
      { period: "13/10/2017", price: "200" }, 
      { period: "20/10/2017", price: "300" }, 
      { period: "27/10/2017", price: "400" }, 
      { 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" } 
      ] 
      } 
    ] 
     calendarTableSelected: Array; 
     i: number= 0; 
     constructor() { 
      this.calendarTableSelected = this.calendarTable[0]; 
     } 
     update(){ 
      if(this.i == 0){this.i = 1;}else{this.i = 0}// change this acc. to your needed logic or use any of the above provided links to form your logic 
      this.calendarTableSelected = this.calendarTable[this.i]; 
     } 

    } 

plunkrでそれを変更することができトグルロジックを持つ単一のボタンを提供しても必要に応じて

Answer 3

Angular 4にngxページネーションがインストールされた単純な解は、hereです。必要なのは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"> 

が、それはあなたのお役に立てば幸い！