带分页的可扩展嵌套 Angular 材料数据表未按预期工作？

Question

I have a requirement that nested table with tabs, I am using angular material.

Required pagination for Branch Data(server Side Pagigantion) and inner tables within a two tabs(client side pagigantion) as well

it's not working as expected, Pagigantion is applying one for 0 index, from second recored I fi click second page paging it's updating third table, third-> 4 th updating

I taken like thease

//branch

branchSource: MatTableDataSource;

@ViewChild('branchSort', { static: true }) sort: MatSort;

@ViewChild(MatPaginator, { static: true }) branchPaginator: MatPaginator;

//tab1

@ViewChildren('innerTables') innerTables: QueryList<MatTable>;

@ViewChildren(MatPaginator) paginator: QueryList;

@ViewChildren('innerSort') innerSort: QueryList;

//tab2

@ViewChildren('innerTables1') innerTables1: QueryList<MatTable>;

@ViewChildren('innerSort1') innerSort1: QueryList;

@ViewChildren(MatPaginator) paginator1: QueryList;

For Reference Please check: < https://stackblitz.com/edit/angular-nested-mat-table-2ave8p?file=app%2Ftable-expandable-rows-example.ts>

Suggest me good approach to fullfill the requiremnet. Thanks in advance

Answer 1

I solved my problem

The problem is mat viewchild reference

I modified my code like this

@ViewChild('branchSort', { static: true }) sort: MatSort;
  @ViewChildren('innerSort') innerSort: QueryList<MatSort>;
  @ViewChildren('innerSort1') innerSort1: QueryList<MatSort>;
  @ViewChildren('innerTables') innerTables: QueryList<MatTable<any>>;
  @ViewChildren('innerTables1') innerTables1: QueryList<MatTable<any>>;
  @ViewChildren('paginator') paginator: QueryList<MatPaginator>;

  @ViewChildren('paginator1') paginator1: QueryList<MatPaginator>;
  @ViewChild(MatPaginator, { static: true }) batchPaginator: MatPaginator;

https://stackblitz.com/edit/angular-nested-mat-table-dmzvun?file=app%2Ftable-expandable-rows-example.ts

Answer 2

Super!

Just a fix in your stackblitz line 344 this.branchSource.paginator = this.batchPaginator;

Thanks for sharing