1

我试图将 aMatPaginator与MatTable谁的 dataSource 输入属性相关联，该属性只是在模板中声明，而不是从组件本身中订阅。例如：

<table mat-table [dataSource]="allData$ | async" class="mat-elevation-z8">

通常，我会将分页器与组件中的数据源相关联，如下所示：

export class AppComponent {
  @ViewChild(MatPaginator) set paginator(paginator: MatPaginator) {
    if (paginator) {
      this.dataSource.paginator = paginator;
    }
  }
  dataSource;
  displayedColumns = ['first_name', 'last_name', 'email', 'ip_address'];

  constructor(private appService: AppService) {}

  ngOnInit() {
    this.appService.getData().subscribe((data) => {
      this.dataSource = new MatTableDataSource(data);
      this.dataSource.paginator = this.paginator;
    });
  }
}

不幸的是，这不适用于前一种方法，因为我们实际上并没有直接创建新的数据源，也无法关联数据源，并且通过async管道自动以声明方式订阅。

这是一个显示问题的 StackBlitz：https ://stackblitz.com/edit/angular-ivy-ebddd6?file=src/app/app.component.html 。

4

2 回答 2

1

mat-paginator 可以“独立”使用，也可以在您拥有 MatTableDataSource 对象时使用。mat-table 的属性“datasource”可以是：数组、observable 或 MatTableDataSource。

要独立使用，您可以使用模板引用变量“pag”和变量“length”

<mat-paginator #pag [length]="length"
  [pageSizeOptions]="[5, 10, 20]"
  showFirstLastButtons>
</mat-paginator>

然后顺便使用|slice

<table mat-table [dataSource]="allData$|async 
           |slice:pag.pageIndex*pag.pageSize:
                  (pag.pageIndex+1)*pag.pageSize" 
    class="mat-elevation-z8">

拼图的最后一块是使用 pipe tap 来获取数组的长度

  allData$ = this.appService.getData().pipe(
    tap((res:any[])=>{
      this.length=res.length
    }))

为避免错误“AfterChecked”，您可以将变量 allData$ 分配给包含在 setTimeOut 中的 ngOnInit

   ngOnInit(){
    setTimeout(()=>{
      this.allData$ = this.appService.getData().pipe(
        tap((res:any[])=>{
          this.length=res.length
        }))
      })
    }

查看堆栈闪电战

于 2021-12-14T22:44:17.237 回答
1

我不明白为什么你不能MatTableDataSource在组件中订阅它。我们只是在里面设置数据map并返回一个MatTableDataSource，这样你就可以将分页器附加到它上面。对于ViewChildmatpaginator 我们需要设置static: true以便我们可以立即访问它，所以我会这样做：

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

allData$ = this.appService.getData().pipe(
  map((data) => {
    let dataSource = new MatTableDataSource(data);
    dataSource.paginator = this.paginator;
    return dataSource;
  })
);

堆栈闪电战

于 2021-12-15T08:22:55.867 回答