typescript 带有分页器的 Angular 5 材料表在更改之前是空白的

Angular 5 Material Table With Paginator in Tab is Blank Until Change

提问by av0000

I copied the Material example table into one of my tabs of my app. If I add pagination to the table it will initially display as empty until I click a new page or page size.

我将 Material 示例表复制到我的应用程序的一个选项卡中。如果我向表格添加分页，它最初将显示为空，直到我单击新页面或页面大小。

This makes sense as the documentation says "Set the paginator after the view init since this component will be able to query its view for the initialized paginator." but I was wondering on what are the best practices for initializing a table inside of a tab so that I could use the paginator.

这是有道理的，因为文档说“在视图初始化之后设置分页器，因为该组件将能够查询其视图以获取已初始化的分页器。” 但我想知道在选项卡内初始化表格以便我可以使用分页器的最佳实践是什么。

Thanks!

谢谢！

Code: HTML

代码：HTML

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

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

Code: TS

代码：TS

import {Component, ViewChild} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';

/**
 * @title Table with pagination
 */
@Component({
  selector: 'table-pagination-example',
  styleUrls: ['table-pagination-example.css'],
  templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample {
  displayedColumns = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

  @ViewChild(MatPaginator) paginator: MatPaginator;

  /**
   * Set the paginator after the view init since this component will
   * be able to query its view for the initialized paginator.
   */
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }
}

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: Element[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

回答by PuntanetDeveloper

I had this problem had result so:

我遇到了这个问题，结果是：

import { AfterViewInit } from '@angular/core';

and add

并添加

ngAfterViewInit() {
this.dataSource.paginator = this.paginator;

}

}

回答by Asif Karim Bherani

I was having the same issue while trying to use mat-pagination in combination with the traditional data table as by default the page size was undefined and then I was looking at the documentation and found that page Event is emitted when the paginator changes the page size or page index, so I created a behavior subject with the default values like:

我在尝试将 mat-pagination 与传统数据表结合使用时遇到了同样的问题，因为默认情况下页面大小未定义，然后我查看文档并发现当分页器更改页面大小时会发出页面事件或页面索引，所以我创建了一个具有默认值的行为主题，例如：

paginationDetail = new BehaviorSubject(
{
 length: 10,
 pageIndex: 0,
 pageSize: 10
});

And then, in you HTML you can add event listner on the mat-paginator like:

然后，在您的 HTML 中，您可以在 mat-paginator 上添加事件监听器，例如：

<mat-paginator #paginator
             (page)="getUpdate($event)"
             [pageSize]="10"
             [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>

This getUpdate method will be called on each change in the pagination, so we can replace the default value of the behaviorSubject with the new value like:

这个 getUpdate 方法将在分页中的每次更改时调用，因此我们可以将行为主题的默认值替换为新值，例如：

getUpdate(event) {
  this.paginationDetail.next(event);
}

You can use this behaviorSubject to get the latest value on the pagination. So the basic idea is to assign the default values until you get the update triggered from the pagination. Again this solution is if you use mat-pagination with traditional data table. If using mat-table I dont think so you should have any problem with direct assignment of this.myDataSource.paginator = this.paginator;

您可以使用此行为主题来获取分页上的最新值。所以基本思想是分配默认值，直到您从分页触发更新。同样，如果您将 mat-pagination 与传统数据表一起使用，则此解决方案也是如此。如果使用 mat-table 我不认为你应该对 this.myDataSource.paginator = this.paginator 直接赋值有任何问题；