I have a Spring Boot-Angular application and I am implementing server-side pagination. While my application is working fine, I am encountering a console error in TypeScript.
Here is the code from user-list.component.ts:
userList(): void{
this.userService.pagination(20, 1).pipe(
tap(users => this.setUsers(users.content)),
map((userData: UserData) => this.dataSource = userData)).subscribe();
}
setUsers(content: any){
this.users = content;
}
onPaginateChange(event: PageEvent){
let page = event.pageIndex;
let size = event.pageSize;
page = page + 1;
this.userService.pagination(size, page).pipe(
map((userData: UserData) => this.dataSource = userData)).subscribe();
}
And from user-service.service.ts:
public pagination(pageSize: number, currentPage:number): Observable<UserData>{
let params = new HttpParams();
params = params.append('currentPage', String(currentPage));
params = params.append('pageSize', String(pageSize));
return this.http.get<UserData>(this.usersUrl, {params})
}
Lastly, here is the UserData model from user-data.ts:
export class UserData {
content!: User[];
pageable!: {
sort: {
empty: boolean,
sorted: boolean,
unsorted: boolean
},
offset: number,
pageNumber: number,
pageSize: number,
paged: boolean,
unpaged: boolean
};
last!: boolean;
totalPages!: number;
totalElements!: number;
size!: number;
number!: number;
sort!: {
empty: boolean,
sorted: boolean,
unsorted: boolean
};
first!: boolean;
numberOfElements!: number;
empty!: boolean;
}
You can view the console error here. I am unsure about what is causing this error and how to resolve it.