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

Question

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 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

Answer 1

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
              }
                  
            "