пагинатор таблицы mat и проблема сортировки для динамических данных

Я пытаюсь реализовать таблицу матов, проблема в том, что ее сортировка и пагинатор не работает, я рассмотрел все вопросы, связанные с тем же, но не могу это исправить. Если я получаю 10 записей, он показывает только первые пять, и если я изменяю код и пытаюсь, он либо показывает все 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, и у всех есть мат, и каждый пагинатор таблицы матов и сортировка имеют такую ​​проблему


angularjs angular-material angular7 angular-material2 angular-material-table
person nhi    schedule 26.10.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

это проблема времени рендеринга, оберните свою логику разбиения на страницы и сортировку в 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 и MatPaginator не работают без setTimeOut

person Dicekey    schedule 26.10.2020
comment
Я пробовал данное решение, но оно не работает. также по данной ссылке есть другое решение, которое я тоже пробовал, но он не работает - person nhi; 26.10.2020
comment
вы можете предоставить демонстрацию stackbliz? - person Dicekey; 26.10.2020

arrow_upward
0
arrow_downward

Проверьте это, это сработало для меня

вам нужно установить MatTableDataSource на некоторое начальное значение

// создаем источник данных

this.myDataSource = новый MatTableDataSource (initialData);

// обновляем данные в источнике данных, когда они доступны

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

ссылка: https://github.com/angular/components/issues/8381#issuecomment-344020159

person Priya Sivalenka    schedule 21.05.2021