如何使用angular和ngx-materialize使用分页

时间:2018-10-26 01:24:54

标签: angular materialize

我正在尝试实现ngx-materialize的分页,正在浏览名称列表,但无法获得预期的结果,有人吗?

库:https://github.com/sherweb/ngx-materialize

示例:https://sherweb.github.io/ngx-materialize/pagination

我的代码:

    <ul class="collection">
  <div class="col s12">
<li class="collection-item avatar" *ngFor="let item of listaCliente">
    <div *ngIf="item.statusCliente == 'ATIVO'; else inativo">
      <i class="material-icons circle green">perm_identity</i>
    </div>
    <span class="title">{{item.nome}}</span>
    <p>CPF: {{item.cpf}} <br>
      Status: {{item.statusCliente}}
    </p>
    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    <a class="secondary-content waves-effect waves-light blue lighten-1 btn"><i class="material-icons right">person</i>Visualizar</a>
  </li>
    <mz-pagination [currentPage]="paginationCurrentPage" [enableFirstAndLastPageButtons]="paginationEnableFirstAndLastPageButtons"
      [itemsPerPage]="paginationItemPerPage" [maxPageButtons]="paginationMaxPageButtons" [totalItems]="paginationTotalItems"
      (pageChange)="playgroundPageChange($event)">
    </mz-pagination>
  </div>
</ul>

Component.ts

playgroundPageChange(currentPage: number) {
    this.paginationCurrentPage = currentPage;
  }

0 个答案:

没有答案