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

Question

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

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

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

我喜欢thease

//分支

分支源：MatTableDataSource；

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

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

//tab1

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

@ViewChildren(MatPaginator) 分页器：QueryList；

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

//tab2

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

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

@ViewChildren(MatPaginator) paginator1: QueryList;

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

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

标签： javascriptangularangular-materialangular7angular9

Answer 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