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