在Angular 4中的Ng-Bootstrap分页

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

      }); 
    } 
} 

HTML

<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

你必须通过pageProducts做* ngFor

<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); 
}