Ng-Bootstrap Pagination in Angular 4

Question

私はAngular 4でページネーションを実装しようとしていますが、それでも動作しません。私は自分のデータを購読してhtmlで出力するためにサービスを使いました。私はそれにページ分割を入れて制限したいと思っています。以下は私のコードです。

TS

export class ProductListComponent implements OnInit { 
    closeResult: string; 
    products: any; 
    subscription: Subscription; 

    constructor(private modalService: NgbModal, private productService: ProductsService) { } 
    page :number = 1; 
    ngOnInit() { 
    this.subscription = this.productService.getAll() 
     .subscribe(
      (data:any) => { 
      this.products = data; 
      }, 
      error => { 

      }); 
    } 
} 

あなたはpageProducts上* ngForを行う必要があります

<tbody> 
    <tr *ngFor="let product of products"> 
    <td>{{ product.name }}</td> 
    <td>{{ product.desc }}</td> 
    <td>{{ product.qty }}</td> 
    <td>{{ product.price }}</td> 
    <td> 
     <button type="button" class="btn btn-sm btn-primary"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</button> 
    </td> 
    </tr> 
</tbody> 
</table> 
<nav class="pull-right"> 
    <ul class="pagination pagination-sm"> 
    <ngb-pagination [collectionSize]="50" [(page)]="currentPage" size="sm"></ngb-pagination> 
    </ul> 
</nav> 

Answer 1

HTML

<tr *ngFor="let product of pageProducts"> 
    <td>{{ product.name }}</td> 
    ... 

//And in your module: 
currentPage:number=1; 
get pageProducts(){ 
    return this.products.slice((currentPage-1)*10,currentPage*10); 
}