使用 mat-paginator 和 mat-table 使用 observable 数组作为数据源
Posted
技术标签:
【中文标题】使用 mat-paginator 和 mat-table 使用 observable 数组作为数据源【英文标题】:using mat-paginator with mat-table using observable array as the datasource 【发布时间】:2020-03-09 13:42:11 【问题描述】:我使用可观察数组作为数据源。除了我现在无法弄清楚如何使用分页器之外,这很好用。下面是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;
所以在我直接关联卡片 observavble 之后,我需要弄清楚 paginator 上的最后一行注释。请指教
【问题讨论】:
【参考方案1】:您只需要在其中获取对表的DataSource
and set your paginator 的引用。例如:
dataSource = new MatTableDataSource()
async ngOnInit()
this.dataSvc.fetchCards().pipe(
map((cards: any) => cards.map(cardObj =>
var c = new Card(cardObj.key, cardObj._frontImageUrl, cardObj._date, cardObj._rawData)
)).subscribe(cards => this.dataSource.data = cards);
);
ngAfterViewInit()
this.dataSource.paginator = this.paginator;
<mat-table [dataSource]="dataSource">
【讨论】:
this.table.datasource.paginator = this.paginator;失败说 TypeError: Cannot set property 'paginator' of undefined 你写过大写的数据源-dataSource
吗?如果不是,我建议您也将自动完成插件安装到您的 IDE。我没有检查拼写
它;正确地写为 this.table.dataSource.paginator = this.paginator
在你的 sn-p this.table.dataSource.paginator = this.paginator 不在ngAfterViewInit
好分页器被突出显示为红色,表示它不是 CDKTableDataSourceInput 的属性,所以我认为它的定义位置并不重要。以上是关于使用 mat-paginator 和 mat-table 使用 observable 数组作为数据源的主要内容,如果未能解决你的问题,请参考以下文章
如何为 mat-cards 添加 mat-paginator?