Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Argument of type 'xyz[ ] | null ' is not assignable to parameter of type 'Collection<unknown>'

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.

10 | async ~~~~~

ngFor loop where I'm trying to use both | async and | paginae:{} , and getting error on | 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 solved the issue even I'm writing in the answer box right now. I ask you to stay and see the answer if that could be improved
– M Nouman
                Nov 23, 2022 at 6:58
                @BarışCanYılmaz Even If I use the code in ngOnInit, I still have to provide type any to solve the issue. blogposts$!: Observable<PostSchema[] | any>;
– M Nouman
                Nov 23, 2022 at 7:11
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
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.