[英]Reactive Angular Material Data Table
我用这个ng generate @angular/material:material-table
命令创建了一个Angular Material Data Table,它给了我以下文件结构:
这里的想法是在table-datasource.ts
进行所有获取,排序和分页。 默认情况下,数据放在table-datasource.ts
中的一个数组table-datasource.ts
但在我的情况下,它来自一个公开一个Observable of Array的ngxs-store。 我有以下实施:
表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
表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()
这样的解决方案像这样在取在comonent不希望完成。 此外,这没有实施排序。 handlePage()
方法中。 版本:
我想出了如何根据我的要求设置表格。 主要的变化是我删除了Observable,它从TableDataSource获取数据并引入了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);
}
}
基本上,该服务从任何Observable输入获取数据,并在getAllItems方法中将其与初始值合并。
Component有一个这个服务的实例:
private _dataService: DataService | null;
它在load方法中移交给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中的paginator需要表的长度进行渲染(见下文)。
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;
完整的代码可以在这个项目中看到,表的实时版本在whatsmytoken.com上使用 。
哇!
几乎在同一时间,我写了一篇关于我的Reactive DataSource的文章,可以很容易地扩展到多个数据列表! 您可以添加可选和必需的 mutator ,并附带getter函数来收集相应的参数并将它们合并到REQuest对象中。
我在这里解释了整体内容:
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6
我在StackBlitz上安装了一个演示程序,并使用Github repo显示简单提交,以简洁的方式设置过滤/排序/分页列表是多么简单。
我希望你能给我一些关于我图书馆的反馈,
如果你觉得它很有吸引力,我可以肯定也会用你的用例支持你:)
快乐的编码!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.