我使用可观察数组作为数据源。这工作正常,只是我现在无法弄清楚如何使用分页器。下面是html和ts
html
<table mat-table #TABLE [dataSource]="cards" class="mat-elevation-z8">
<!-- Email Column -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef class="tbl-th"> Date </th>
<td mat-cell *matCellDef="let element"> {{core.pretifyDate(element.date)}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100]" [pageSize]="pageSize" showFirstLastButtons></mat-paginator>
.ts
export class CardQueueComponent implements OnInit {
@ViewChild('TABLE', {static: false}) table: MatTable<any>;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
displayedColumns: string[] = [ 'image', 'customer', 'email', 'date', 'process' ];
cards: Observable<Card[]>
pageSize = 5
constructor(public dataSvc: SBDataService,
public core:CoreService,
private changeDetectorRefs: ChangeDetectorRef,
) { }
async ngOnInit() {
this.cards = this.dataSvc.fetchCards().pipe(
map((cards: any) => cards.map(cardObj => {
var c = new Card(cardObj.key, cardObj._frontImageUrl, cardObj._date, cardObj._rawData)
return c
}))
);
this.changeDetectorRefs.detectChanges();
//this.dataSource.paginator = this.paginator;
}
}
因此,在我直接关联卡观察之后,我需要弄清楚分页器上的最后一条注释行。请指教