How to implement Custom Material Data Source for Data Table? - datasource

Question

I'm trying to implement DataSource for Material DataTable with pagenator, sorting etc.
An example of implementation is described here: https://blog.angular-university.io/angular-material-data-table/
From service i'm get following model:
export interface IResult {
results: Flat[];
currentPage: number;
pageCount: number;
pageSize: number;
length: number;
firstRowOnPage: number;
lastRowOnPage: number;
}
Method in service looks following:
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())
});
}
DataSource realization:
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));
}
}
In subscribe(obj => this.flatSubject.next(obj)) i'm getting following error: IResult is not assignable to type Flat[]. I have no error when casting obj to <Flat[]>obj, also i see that's backend return data but result in UI is empty.
I think that error here subscribe(obj => this.flatSubject.next(<Flat[]>obj)) but have no ideas how it fixing. What I'm doing wrang?
I implemented an DataSource differently. Realization looks following:
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() { }
}
It works but doesn't match in my case.

Answer 1

replace this code
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
at the end of table
this is the error