1

Angular 6 のマット テーブルにページネーションを追加しようとしています。以下のリンクの例をいくつか使用しています。しかし、それは機能していません:

https://material.angular.io/components/table/examples

マットテーブルにデータが適切に入力され、ページネーターがその下に適切に表示されるように見えますが、それらは互いに接続できていません:

ここに画像の説明を入力

ご覧のとおり、ページネーターは 1 ページあたり 5 レコードに設定されていますが、テーブルの現在のページには を超えるレコードがあります。また、0 のうち 0 も表示されます。これは、テーブルへのリンクに失敗したことをさらに示しています。

これが私のhtmlです：

    <mat-table #table [dataSource]="dataSource" class="animate topMatDataTable”&gt;
…
     </mat-table>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" [pageSize]="5" showFirstLastButtons></mat-paginator>

これが私のtsコードです：

export class DynamicDataListComponent implements OnInit {
…
  dataSource : MatTableDataSource<any>;
…
  @ViewChild(MatPaginator) paginator : MatPaginator;
…
  ngOnInit() {
…
    this.loadEndpoints();
  }

  async loadEndpoints() {
…
      const endpointListObs = await this._dataStorageService.getAPIEndpointList();
      endpointListObs.subscribe((endpointList: any[]) => {
        this.dataSource = new MatTableDataSource<any>(endpointList);
        this.dataSource.paginator = this.paginator;
…
      });
…
  }
…
}

誰が私が間違っているのか教えてもらえますか?

ありがとう。

4

4 に答える 4

0 
<div [hidden]="!isLoading">
...
</div>

PS：質問が古く、解決策がすでに提供されていることは知っています。同じ問題があり、うまくいきました。hidden を使用すると問題が解決しました。将来の訪問者のためにここに残します。 クレジット

于 2020-05-26T23:22:14.297 に答える
0

テンプレートにページネーターへの参照がありません。テンプレートを変更して、以下を含めます#paginator。

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" [pageSize]="5" showFirstLastButtons></mat-paginator>

于 2018-12-19T22:36:12.920 に答える