I'm writing a scenario where I get all the blogposts related to a certain category and I'm handling them using pagination by using ngx-Pagination
. But when I reload the browser the posts does not remain on the page and all the posts are lost. And to cover that I'm using somekind of Of Observable Subscription
methode by catching url route. With that methode I'm able to store posts even if the page is reloaded. But the issue is that now I'm not able to use pagination as I have to use async
in my for loop to dynamic subscribe and destroy. And I'm facing the error when I try to use both async
and pagination
in for loop.
- error TS2345: Argument of type 'PostSchema[] | null' is not assignable to parameter of type 'Collection'.
10 | async ~~~~~
ngFor loop where I'm trying to use both | async
| async
and | paginae:{}
| paginae:{}
, and getting error on | async
| async
*ngFor="let post of blogposts$ | async | paginate
: {
id: 'paginate',
itemsPerPage: 4,
currentPage: page,
totalItems: result.length
}"
ts file where I'm using some method to maintain the posts
page: number = 1;
blogposts$: Observable<PostSchema[]> = this.activeroute.params.pipe(
switchMap((param: Params) => {
const postCategory: string = param['category'];
return this.postService
.getCategoryPosts(postCategory)
.pipe(map((blogEntery: PostSchema[]) => blogEntery));
})
);
ngOnInit(): void {
}
service.ts code
url: string = 'http://localhost:3000';
public getCategoryPosts(category: string): Observable<PostSchema[]> {
return this.http.get<PostSchema[]>(
`${this.url}/blog-post/categoryPosts/${category}`,
{
headers: {
'Content-Type': 'application/json',
},
}
);
}
If I don't use the Subscription method I lose the posts over reload, and If use it I'm not able to use pagination. I tried by using OnDestroy
but I couldn't find unsubscribe
in that. A solution is needed as I want both results
I've made the solution The error was due to types
of Observable[Array]
and Pagination
. So I also focused on handling types instead of handling ngFor
.I tried with unknown
and Collection<unknown>
, but with the help of type any
the issue is solved. Old ts code
blogposts$: Observable<PostSchema[]> = this.activeroute.params.pipe(
switchMap((param: Params) => {
const postCategory: string = param['category'];
return this.postService
.getCategoryPosts(postCategory)
.pipe(map((blogEntery: PostSchema[]) => blogEntery));
})
);
Current Solution
blogposts$: Observable<PostSchema[] | any> = this.activeroute.params.pipe(
switchMap((param: Params) => {
const postCategory: string = param['category'];
return this.postService
.getCategoryPosts(postCategory)
.pipe(map((blogEntery: PostSchema[]) => blogEntery));
})
);
Currrent working NgFor Also as the totalItems
property will make issue as well with new settings
*ngFor="
let post of blogposts$ | async | paginate : {
id: 'paginate',
itemsPerPage: 4,
currentPage: page,
totalItems: (blogposts$ | async)?.length || 0
}
"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.