我使用此ng generate @angular/material:material-table命令创建了一个Angular Material Data Table，它为我提供了以下文件结构：
这里的想法是在table-datasource.ts中进行所有提取，排序和分页。默认情况下，数据放置在table-datasource.ts内部的Array中，但在我的情况下，数据来自ngxs存储，该存储公开了 Observable of Array 。 Atm我有以下实现：
table-datasource.ts：
export class TokenTableDataSource extends DataSource<TokenTableItem> {
@Select(TokenTableState.getTokenTableItems) private tokenTableItems$:Observable<TokenTableItem[]>;
totalItems$ = new BehaviorSubject<TokenTableItem[]>([]);
constructor(private paginator: MatPaginator, private sort: MatSort) {
super();
}
/**
* Connect this data source to the table. The table will only update when
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
connect(): Observable<TokenTableItem[]> {
this.tokenTableItems$.subscribe(item => this.totalItems$.next(item));
// init on first connect
if (this.totalItems$.value === undefined) {
this.totalItems$.next([]);
this.paginator.length = this.totalItems$.value.length;
}
// Combine everything that affects the rendered data into one update
// stream for the data-table to consume.
const dataMutations = [
observableOf(this.totalItems$),
this.paginator.page,
this.sort.sortChange
];
return merge(...dataMutations).pipe(
map(() => this.totalItems$.next(this.getPagedData(this.getSortedData([...this.totalItems$.value])))),
mergeMap(() => this.totalItems$)
);
}
...generated paging and sorting methods
table-component.html：
<div class="mat-elevation-z8">
<table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
...multiple columns
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator
[length]="this.dataSource.totalItems$.value?.length"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
[showFirstLastButtons]=true
(page)="handlePage($event)">
</mat-paginator>
</div>
table.component.ts：
export class TokenTableComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
dataSource: TokenTableDataSource;
pageSizeOptions = [5, 10, 20, 40];
pageSize = this.pageSizeOptions[0];
pageIndex = 0;
tableLength = 0;
... colums definition
ngOnInit(): void {
this.dataSource = new TokenTableDataSource(this.paginator, this.sort);
}
public handlePage(pageEvent: PageEvent) {
// do what?
}
}
工作原理：
什么不起作用：
pageSize并呈现此行数。对我来说奇怪的是，它只能降序工作（给定pageSize为10，而我选择5则结果为5行，但是一旦选择5，则不可能再显示多于5的行）要求：
TableDataSource.connect()之后的想法，因此不希望使用像this这样的解决方案，该解决方案是在目录中完成提取的。此外，这没有实现排序。 handlePage()方法中。 版本：
答案 0 :(得分：0)
我想出了如何根据自己的需求设置表格。主要更改是，我删除了从 TableDataSource 获取数据的Observable，并引入了 DataService ：
export class DataService {
//the @Select is from ngxs but can be anything returning an Observable
@Select(TokenTableState.getTokenTableItems) private tokenTableItems$: Observable<TokenTableViewItem[]>;
private initValue$: BehaviorSubject<TokenTableViewItem[]> = new BehaviorSubject<TokenTableViewItem[]>([]);
getAllItems(): Observable<TokenTableViewItem[]> {
const sources = [this.tokenTableItems$, this.initValue$];
return merge(...sources);
}
}
基本上，该服务从任何可观察的输入中获取数据，并将其与 getAllItems 方法合并为初始值。
组件具有此服务的一个实例：
private _dataService: DataService | null;
，它将通过加载方法移交给 TableDatasource ：
private loadData(): any {
this._dataService = new DataService();
this.dataSource = new TokenTableDataSource(
this._dataService,
this.paginator,
this.sort
);
fromEvent(this.filter.nativeElement, 'keyup').subscribe(() => {
if (!this.dataSource) {
return;
}
this.dataSource.filter = this.filter.nativeElement.value;
});
}
我在 TableDataSource 中没有引用 DataService 的原因是 Component 中的分页器需要渲染表（如下所示）。
TableDataSource 像这样使用 DataService ：
在 connect 方法中，它保存有可能发生数据突变的数组：
const dataMutations = [
this._dataChange,
this._sort.sortChange,
this._filterChange,
this._paginator.page
];
数组的 _dataChange 成员可以通过从我们的 DataService 订阅 getAllItems 方法获得其值：
this._internalService.getAllItems().subscribe(data => {
this._dataChange.next(data);
});
dataMutations 用来过滤，排序和返回应显示的数据：
return merge(...dataMutations).pipe(
map(() => {
// Filter data
this.filteredData = this._dataChange.value
.slice()
.filter((item: TokenTableViewItem) => {
const searchStr = (item.symbol + item.name).toLowerCase();
return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
});
// Sort filtered data
const sortedData = this.getSortedData(this.filteredData.slice());
// Grab the page's slice of the filtered sorted data.
this.renderedData = this.getPagedData(sortedData);
return this.renderedData;
})
);
filterChange 是在本地实例中定义的
_filterChange = new BehaviorSubject('');
分页和排序是通过构造函数从外部触发的
constructor(
public _internalService: DataService,
public _paginator: MatPaginator,
public _sort: MatSort
) {
super();
this._filterChange.subscribe(() => (this._paginator.pageIndex = 0));
}
我还找到了在 component.html 中定义的分页解决方案，如下所示：
<mat-paginator #paginator
[length]="dataSource.filteredData.length"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
[showFirstLastButtons]=true>
</mat-paginator>
，并在 component.ts 中设置了变量：
pageSizeOptions = [5, 10, 20, 40];
pageSize = this.pageSizeOptions[0];
pageIndex = 0;
完整的代码可以在this项目中看到，表的实时版本可以在whatsmytoken.com中使用。
答案 1 :(得分：0)
哇！
差不多在同一时间，我写了一篇有关我的Reactive DataSource的文章，可以很容易地扩展为多个数据列表！您可以添加 optional 和 required mutators ，以及 getter 函数，以收集各自的参数并将其合并为REQuest对象。
我在这里解释了总体内容：
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6
，我也在StackBlitz上安装了一个演示 Github仓库显示了简单的提交， 干净地设置过滤/排序/分页列表的简单性。
希望您能给我一些有关我的图书馆的反馈，
如果您觉得它很吸引人，我当然可以在您的用例中为您提供支持：）
编码愉快！