Question

我正在动态生成数据，并将其显示在数据表中，但我无法将MatPaginator与数据表链接。数据将显示在表格中。以下是示例代码段（也附加它）：

  sCollectionList = null;
  dataSource = new MatTableDataSource<object>(this.sCollectionList);
  displayedColumns: string[] = [];

  // SCollectionService Holds my custom HTTP methods //
  constructor(private stColServ: SCollectionService) {
  }


// Calling it when a Button from UI is clicked //
  submitFilter() {

    // stFilter is a valid objet which is getting passed to my custom post request// 
    this.stColServ.stationFilter(this.stFilter).subscribe(
      data => {
      this.sCollectionList = data;

      this.displayedColumns = ['System Data' , 'Product Identifer' , 'Collected Date' , 'No Stations ?' , 'No Smnp ?', 'Export'];
this.dataSource.data = this.sCollectionList;

//      this.streamOfDataUpdates.subscribe(newData => this.dataSource.data = this.sCollectionList);
      this.dataSource.paginator = this.paginator;
      },
    );

  }


  @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;
  }

我能够在UI上看到分页器，但它完全没有响应。以下是我的示例HTML MatTable代码，该代码显示表中的数据：

<div style="margin-left: 30px;" class="example-container mat-elevation-z8 col-md-6 col-md-offset-3">

            <mat-table #table [dataSource]="dataSource">
            <ng-container matColumnDef="System Data"> 
            <mat-header-cell fxFlex="200px"
                *matHeaderCellDef> System Data </mat-header-cell>
            <mat-cell
                *matCellDef="let station"> <textarea readonly rows="8"
                wrap='off' show-tail> {{station['collectedData']}}</textarea> </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="Product Identifer"> <mat-header-cell
                *matHeaderCellDef>Product Identifer</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.productIdentifier}}
            </mat-cell> </ng-container> 
            <ng-container matColumnDef="Collected Date"> <mat-header-cell
                *matHeaderCellDef>Collected Date</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.collectionDate}} </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="No Stations ?"> <mat-header-cell
                *matHeaderCellDef>No Stations ?</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.noIpStations}} </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="No Smnp ?"> <mat-header-cell
                *matHeaderCellDef>No Smnp ?</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.snmpFlagOn}} </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="Export"> <mat-header-cell
                *matHeaderCellDef> Export </mat-header-cell> <mat-cell
                *matCellDef="let station">
            <button
                (click)="downloadCSV(station.productIdentifier,station.collectedData)">Export
                CSV</button>
            </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 *ngIf="sCollectionList" class="marginless-paginator-range-label"
                #paginator
                [pageIndex]="0"
                 [pageSize]="5"
                [pageSizeOptions]="[5, 10, 20]"> </mat-paginator>

        </div>

以下是我收到的数组响应，这是我试图在UI上显示的内容：

[{
"productIdentifier":"365",
"snmpFlagOn":false,
"collectedData":"ahsgabbs s[lsnnspm] n",
"noIpStations":true,
"collectionDate":1511721000000
}]

我错过了什么吗？

Answer 1

这对我有用：（看看设置的超时时间）

  ngOnChanges(changes: SimpleChange) {
    if (changes["dataSource"]) {
      this.data = new MatTableDataSource(this.dataSource);
      setTimeout(() =>{
        this.data.paginator = this.paginator;
        this.data.sort = this.sort;
      });
    }
  }

Answer 2

尝试从mat-paginator标签中删除ngIf属性，我在使用它时也遇到了同样的问题。但请注意，当您第二次或稍后再次刷新表时，您的自定义长度值可能不起作用。

Answer 3

这是因为this.paginator在分配给this.dataSource.paginator时未定义。

这就是我解决问题的方式

分页

  @ViewChild(MatPaginator, {static: false})
  set paginator(value: MatPaginator) {
    this.dataSource.paginator = value;
  }

用于排序

  @ViewChild(MatSort, {static: false})
  set sort(value: MatSort) {
    this.dataSource.sort = value;
  }

作为提示，我在机芯上使用Angular 9。

MatPaginator不在动态生成的表中工作。

3 个答案: