使用带有 Observable 和不带表格的 Angular Material Paginator

Question

（请帮忙，仍然没有解决）所以我正在关注这个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();
}

Answer 1

你需要使用table上的dataSource

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

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

total 是项目总数，limitSize 是页面的产品数量

Answer 2

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

HTML：

<mat-paginator *ngIf="total > 0"
    [length]="total"
    [pageSize]="pageSize"
    [pageIndex]="pageIndex"
    (page)="pageChanged($event)"
    [pageSizeOptions]="[5, 10, 25, 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() 方法。