Question

我有一个大而复杂的自定义表，在用户点击和许多其他操作上可以看到许多嵌套行。我需要对该表进行分页，显示每页选择器的项目和每个页面的“结果编号”

（类似于）

我发现angular material paginator component（上图是现实中的那个组件）对我来说似乎很完美，但我无法重新导入组件。如何将页面更改事件绑定到我的自定义表？我搜索了有角度的材料网站，但我没有找到任何有用的例子。唯一的是this table example涉及我不能使用的其他材料成分。

有任何帮助吗？

这是paginator标签

<mat-paginator [length]="this.state?.unitaDocByMap.length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="pageEvent = $event">
</mat-paginator>

这是我表的摘录

 <ng-container *ngFor="let unitaDoc of this.state?.unitaDocByMap >
      <tr>
      <td>{{unitaDoc?.nome}}</td>
      <td *ngFor="let ist of unitaDoc?.istanzeMetadato;">
        {{ist?.valore}}
      </td>
      <td>

        <button type="button" class="btn btn-primary" title="Visualizza Documenti UD"
                (click)="getCustomDocumentiRow(unitaDoc?.id); hide(this.i); this.avviato = false"
                [attr.id]="'but'+this.i">
          <i class="fa fa-eye" aria-hidden="true"></i>
        </button>
      </td>
    </tr>
    <tr [hidden]="!hideme[this.i]" [attr.id]="this.i">
      <td [attr.colspan]="this.dimensione">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">Documenti</h4>
          </div>

          <div class="panel-body">

            <table class="table table-responsive table-hover">
              <thead>
              <tr>
                <th>Funzione documento</th>
                <th>Versione</th>
                <th>VDC</th>
                <th>SIP</th>
                <th>Elementi</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let doc of this.state?.docCustom;">

.... and so on

如你所见，我无法转换表格。也许我可以使用另一个分页器，但我找不到任何其他能够在每页更改结果并且显示每页中列出的结果编号。

Answer 1

我发现这个组件ngx.pagination是准系统分页符，但是通过一些数学运算，我可以编写此页面的结果编号，并且我可以创建一个更改每页显示的元素。

顺便说一句，我想知道其他组件的解决方案。

Angular 2+过滤器* ngFor带有Material Paginator的表

1 个答案: