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

你必须在页面产品上进行* 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);
}

Angular 4中的Ng-Bootstrap分页

1 个答案: