Angular 2+ filter * ngFor Material Paginatorのテーブル

Question

私は大きくて複雑なカスタムテーブルを持っていて、ユーザーのクリックや他の多くのアクションで多くのネストされた行が表示されています。私はangular material paginator componentを発見した（のようなもの）

（上記画像は、実際にそのコンポーネントである）ようだ

すべてのページのページ・セレクタと「結果数」あたりの項目を表示する

、そのテーブルをページ付けする必要があります私には完璧ですが、コンポーネントをインポートすることはできません。ページ変更イベントをカスタムテーブルにバインドするにはどうすればよいですか？ 角度のある素材ウェブサイトを検索しましたが、役に立たない例は見つかりませんでした。唯一の this table exampleは私が使用することができない他の材料成分を含んでいます。

助けが必要ですか？ここで

は見ての通り、私はテーブルを変換することはできませんページネータタグ

<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

ベアボーン改ざん者であるこのコンポーネントが見つかりましたが、いくつかの計算でこのページの結果番号を書くことができ、ページごとに表示される要素を変更することができます。

ところで、私は他のコンポーネントとの解決策を知りたいと思います。