Angular 2+ filter *ngFor table with Material Paginator

Question

我有一個大而復雜的自定義表，在用戶單擊和許多其他操作時可以看到許多嵌套行。 我需要對該表格進行分頁，以顯示每頁選擇器的項目和每頁的“結果編號”

（就像是 )

我發現了angular material paginator 組件（上圖是現實中的那個組件），這對我來說似乎很完美，但我無法導入該組件。 如何將頁面更改事件綁定到我的自定義表？ 我搜索了 angular material 網站，但沒有找到任何有用的例子。 唯一的表格示例涉及我無法使用的其他材料組件。

有什么幫助嗎？

這是分頁器標簽

<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 ，它是准系統分頁器，但是通過一些數學運算，我可以編寫此頁面的結果編號，並且可以創建一個更改每頁顯示的元素。

順便說一句，我想知道其他組件的解決方案。