After making an http request to fetch some data, I am facing issues in displaying it as intended. The dropdown select for entriesPerPage, and the left and right cursors for switching page in pagination are working fine. However, upon switching a page, I encounter the error:
Cannot read property 'page' of undefined
Furthermore, I am unable to display the values for totalEntries or totalPages. These properties do not seem to bind correctly.
component.ts
public getArticles(): void {
this.articleService.getAllArticlesWithPagination(this.paginationResponse.pagination)
.subscribe((data) => {
this.dataSource.data = data.data;
this.paginationResponse.pagination.page = data.pagination.page;
this.paginationResponse.pagination.entriesPerPage = data.pagination.entriesPerPage;
this.paginationResponse.pagination.totalEntries = data.pagination.totalEntries;
this.paginationResponse.pagination.totalPages = data.pagination.totalPages;
});
console.log(this.paginationResponse); // added for this question after comments
}
pagination.response
export class PaginationResponse<T> {
public data: T[];
public pagination: Pagination;
constructor() {
this.pagination = new Pagination();
}
}
pagination.ts
export class Pagination {
public static readonly DEFAULT_SIZE = 5;
public static readonly FIRST_PAGE = 0;
public static readonly DEFAULT_TOTAL = 3;
public static readonly DEFAULT_ENTRIES = 10;
public page: number;
public entriesPerPage: number;
public totalPages: number;
public totalEntries: number;
constructor() {
this.page = Pagination.FIRST_PAGE;
this.entriesPerPage = Pagination.DEFAULT_SIZE;
this.totalEntries = Pagination.DEFAULT_ENTRIES;
this.totalPages = Pagination.DEFAULT_TOTAL;
}
}
console.log(this.paginationResponse)EDIT: Upon further investigation, it appears that the paginationResponse.pagination is not being populated with the data from data. Interestingly, while data alone displays all pagination fields (totalPages, totalEntries, page, entriesPerPage), data.pagination only shows those defined in the Pagination.ts constructor snippet above. It's unclear why the pagination data is not being added.
SOLUTION:
I realized that my return in PaginationResponse should encapsulate my Pagination object. I have removed pagination from it and instead included the four fields directly. Thus, despite being brief, the answers provided appear to be correct.