动态数据的垫表分页器和排序问题答案

【问题标题】：mat table paginator and sorting issue for dynamic data动态数据的垫表分页器和排序问题
【发布时间】：2021-02-08 16:38:58
【问题描述】：

我正在尝试实现 mat table，问题是它的排序和分页器不起作用，我已经解决了所有相关的问题，但无法修复它。如果我得到 10 条记录，它只显示前 5 条记录，如果我更改一些代码并尝试，那么它要么显示全部 10 条，但没有按预期工作

HTML 文件

 <div   id="div1"
                  [hidden]="!(  div1===1 && div2===0 && div3===0)">

      <table mat-table [dataSource]="dataSource" matSort>
                          <ng-container matColumnDef="cola">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header> col a </th>
                            <td mat-cell *matCellDef="let row"> {{row.colvala}} </td>
                          </ng-container>
    
                          <ng-container matColumnDef="colb">
                            <th class="headerCell w-17" mat-header-cell *matHeaderCellDef>colb</th>
                           <td mat-cell *matCellDef="let row"> {{row.colvalb}} </td>
                          </ng-container>
     
                          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    
    
                          <tr class="mat-row" *matNoDataRow>
                            <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
                          </tr>
                        </table>
    
      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

我的 TS 文件

export class mycomponent implements OnInit {
 
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  constructor(private _servcall: AppService) { 
  }

ngOnInit() {
    this._servcall.getdatafromapi().subscribe(result => {
      this.resultdata = result;

      this.displayedColumns  = ['col1','col2']
      this.dataSource  = new MatTableDataSource(this.resultdata);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;

}  
  })

}
}

像这个 div 我有更多的 8 个 div 并且都有 matable ，并且每个 mat table 分页器和排序都有这样的问题

【问题讨论】：

标签： angularjs angular-material angular7 angular-material2 angular-material-table

【解决方案1】：

这是渲染时间问题，将分页和排序逻辑包装在 setTimeOut () 中

 ngOnInit() {
this._servcall.getdatafromapi().subscribe(result => {
  this.resultdata = result;

  this.displayedColumns  = ['col1','col2']
  this.dataSource  = new MatTableDataSource(this.resultdata);
      setTimeout(
      () => {
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
       });
   }
 })

【讨论】：

我尝试了给定的解决方案，但它不起作用。在给定的链接上还有另一个解决方案，我也尝试过但它不起作用
你能提供一个stackbliz演示吗？

【解决方案2】：

检查一下，这对我来说就像一个魅力

您必须将 MatTableDataSource 设置为某个初始值

//创建数据源

this.myDataSource = new MatTableDataSource(initialData);

// 可用时更新数据源中的数据

this.streamOfDataUpdates.subscribe(newData => this.myDataSource.data = newData)

参考：https://github.com/angular/components/issues/8381#issuecomment-344020159

【讨论】：