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

问题描述

我正在尝试实现垫子表，问题是它的排序和分页器不起作用，我经历了所有与之相关的问题，但无法修复。如果我有10条记录，它只会显示前5条记录，如果我更改一些代码然后尝试，则它会显示全部10条记录，但不能按预期工作

HTML文件

HidD_GetAttributes

我的TS文件

 <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>

像这样的一个div，我有更多的8 div，并且每个都具有mat功能，每个mat的表分页器和排序都有这样的问题

解决方法

这是渲染计时问题，将您的分页和排序逻辑包装在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;
       });
   }
 })

有关更多详细信息，请参阅 MatSort and MatPaginator does not work without setTimeOut