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

Posted 2023-03-13

【中文标题】带有分页的可扩展嵌套 Angular 材料数据表未按预期工作？

【英文标题】：Expandable nested Angular material data tables with pagination Not working as expected?

【发布时间】：2020-11-28 14:46:09

【问题描述】：

我有一个带有标签的嵌套表格的要求，我使用的是角度材料。

分支数据（服务器端分页）和两个选项卡中的内表（客户端分页）也需要分页

它没有按预期工作，Pagigantion 正在为 0 索引应用一个，从第二个记录开始，我点击第二页 分页正在更新第三张表，第三次->第四次更新

我很喜欢

//分支

branchSource: MatTableDataSource;

@ViewChild('branchSort', static: true ) 排序：MatSort;

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

//tab1

@ViewChildren('innerTables') innerTables: QueryList;

@ViewChildren(MatPaginator) 分页器：QueryList；

@ViewChildren('innerSort') 内部排序：查询列表；

//tab2

@ViewChildren('innerTables1') innerTables1: QueryList;

@ViewChildren('innerSort1') innerSort1: 查询列表；

@ViewChildren(MatPaginator) paginator1: QueryList;

参考请查看：https://stackblitz.com/edit/angular-nested-mat-table-2ave8p?file=app%2Ftable-expandable-rows-example.ts>

建议我完成requiremnet的好方法 .提前致谢

【参考方案1】：

我的问题解决了

问题是mat viewchild引用

我这样修改了我的代码

@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

【讨论】：

你能提供最终的堆栈闪电战吗？

已添加，您现在可以查看