angular - MatPaginator 在动态生成的表中不起作用。

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

这是因为 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。