我正在尝试使用分页器、排序等实现 Material DataTable 的 DataSource。此处描述了一个实现示例：https ://blog.angular-university.io/angular-material-data-table/
从服务我得到以下模型：
export interface IResult {
results: Flat[];
currentPage: number;
pageCount: number;
pageSize: number;
length: number;
firstRowOnPage: number;
lastRowOnPage: number;
}
服务中的方法如下所示：
getObjects(sort: string, order: string,
pageNumber = 1, pageSize = 20): Observable<IResult> {
return this.http.get<IResult>(this.serviceUrl,
{
params: new HttpParams()
.set("sort", sort)
.set("order", order)
.set('pageNumber', pageNumber.toString())
.set('pageSize', pageSize.toString())
});
}
数据源实现：
export class OtherDataSource implements DataSource<Flat> {
private flatSubject = new BehaviorSubject<Flat[]>([]);
private loadingSubject = new BehaviorSubject<boolean>(false);
public loading$ = this.loadingSubject.asObservable();
constructor(private service: ObjectsService) {
}
connect(collectionViewer: CollectionViewer): Observable<Flat[]> {
return this.flatSubject.asObservable();
}
disconnect(collectionViewer: CollectionViewer): void {
this.flatSubject.complete();
this.loadingSubject.complete();
}
loadData(filter = '',
sortDirection = 'asc', pageIndex = 1, pageSize = 20) {
this.loadingSubject.next(true);
this.service.getObjects(filter, sortDirection,
pageIndex, pageSize).pipe(
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false))
)
.subscribe(obj => this.flatSubject.next(obj));
}
}
在subscribe(obj => this.flatSubject.next(obj))我收到以下错误：IResult is not assignable to type Flat[]。obj投射到时我没有错误<Flat[]>obj，我也看到这是后端返回数据但导致 UI 为空。我认为这里的错误，subscribe(obj => this.flatSubject.next(<Flat[]>obj))但不知道它是如何解决的。我在做什么？
我以不同的方式实现了一个数据源。实现如下：
export class NmarketDataSource extends DataSource<Flat> {
resultsLength = 0;
isLoadingResults = true;
isRateLimitReached = false;
cache$: Flat[];
constructor(private nmarketService: ObjectsService,
private sort: MatSort,
private paginator: MatPaginator) {
super();
}
connect(): Observable<Flat[]> {
const displayDataChanges = [
this.sort.sortChange,
this.paginator.page
];
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 1);
return merge(...displayDataChanges)
.pipe(
startWith(null),
switchMap(() => {
return this.nmarketService.getObjects(
this.sort.active,
this.sort.direction,
this.paginator.pageIndex+1,
this.paginator.pageSize);
}),
map(data => {
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = data.rowCount;
this.cache$ = data.results;
return data.results;
}),
catchError(() => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
return of([]);
})
);
}
disconnect() { }
}
它有效，但在我的情况下不匹配。