在 Observable 和没有表格的情况下使用 Angular Material Paginator

编程问答 2022-05-22

问题描述

（请帮忙，仍然没有解决）所以我结合使用 stackoverflow(with mat-card) 和 this(with observable) 来尝试解决我的问题。

我有一个对象数组的 observable，我想使用 *ngFor 和 mat-card 来显示它们，然后在页面的最底部有一个分页器。

现在，可观察对象已正确链接（因为它正在显示），但分页器似乎没有显示任何内容（pic），想知道是否有人可以提供帮助，非常感谢！

（其他功能有很多代码，所以我会尽量只列出我们需要的，如果你觉得有什么遗​​漏，请告诉我）

HTML：

<div *ngIf="obs| async as objects>
 <div>
  <div>
   <mat-card *ngFor="let ob of objects"> ... </mat-card>
  </div>
  <mat-paginator
  [showFirstLastButtons]="true"
  [pageSizeOptions]="[10,20,50,100]"> 
  </mat-paginator>
 </div>

TS： 旁注：filtered$ 是我用于 mat-card 的数组的原始 observable，现在我正在添加分页器，因此在 HTML 中您可以看到我更改为 obs

public dataSource = new MatTableDataSource();
@ViewChild(MatPaginator) paginator: MatPaginator;
obs: Observable<any>;
public filtered$: Observable<Array<An Object>>;

constructor(private changeDetectorRef: ChangeDetectorRef){};

ngOnInit(){
...;
  this.filtered$
  .pipe(takeuntil(...))
  .subscribe((arr) => (this.dataSource.data = arr));
 this.changeDetectorRef.detectChanges();
 this.dataSource.paginator = this.paginator;
 this.obs = this.dataSource.connect();
}

解决方法

你需要使用表上的数据源

或者如果你想在没有表和数据源的情况下使用你需要在分页器上管理总数据

             <mat-paginator 
                (page)="onPageChange($event)"
                [showFirstLastButtons]="true"
                [length]="total"
                [pageSize]="limit"
                [pageSizeOptions]="[5,10,25,100]">
            </mat-paginator>

其中 total 是商品总数，limitSize 是页面的产品数量

,

建议：您必须保留单独的数组或可观察对象。一个用于显示分页数据，另一个用于存储所有数据。

HTML：

<mat-paginator *ngIf="total > 0"
    [length]="total"
    [pageSize]="pageSize"
    [pageIndex]="pageIndex"
    (page)="pageChanged($event)"
    [pageSizeOptions]="[5,100]">
</mat-paginator>

注意：我认为当你没有任何数据时，你不应该显示分页器。

打字稿：

pageChanged(event: any) {
    this.pageIndex = event.pageIndex;
    this.setFilteredData();
}

setFilteredData() {
    this.yourPagedDataArray = this.yourAllDataArray.slice(this.pageSize * this.pageIndex,this.pageSize * this.pageIndex + this.pageSize);
}

注意：您需要在数据获取完成后调用 setFilteredData() 方法。

angularangularangular-materialobservableobservablepaginator