Question

如果有两个表，我在材料分页方面会遇到问题：问题似乎是这样的：Multiple material pagination in one component doesn't work in Angular

我试图在上面的链接中实现该解决方案，但在控制台中却给了我

this.paginator.toArray不是函数

这是我的实现：

  customerTblArray: MatTableDataSource<any>;
  UnitModelsTblArray: MatTableDataSource<any>;
@ViewChild(MatPaginator) paginator = new QueryList<MatPaginator>();



 constructor(private _getCustSrv: GetCustomersService,  private _getUnitModels: GetUnitModelsService) {
    this._getCustSrv.GetAllCustomers().subscribe(r => {
      this.customerTblArray = new MatTableDataSource(r["result"]);
    });

    this._getUnitModels.GetAllUnitModels().subscribe(r => {
      this.UnitModelsTblArray = new MatTableDataSource(r["result"]);
    });
  }

  ngAfterViewInit(): void {
    this.customerTblArray.paginator = this.paginator.toArray()[0];
    this.UnitModelsTblArray.paginator = this.paginator.toArray()[1];
  }

.HTML代码非常大，我在每个模态末尾都使用了引导模态来显示内容：

<mat-paginator [pageSize]="3">
</mat-paginator>

但在控制台中显示错误：

this.paginator.toArray不是函数

即使所有内容都正确地装入了材质表，但分页我无法正常工作。

Answer 1

而不是：@ViewChild(MatPaginator) paginator = new QueryList<MatPaginator>();

输入：@ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();

就足够了。

当存在两个表时，角度材质分页可能无法正常工作

1 个答案: