ngx pagination for Observable array

Question

when ı use ngx pagination for item : Array< any> = [] there is no problem but when use for items: Observable<any[]> ı am getting an error :

Error: src/app/home-page/home-page.component.html:18:36 - error TS2345: Argument of type 'any[] | null' is not assignable to parameter of type 'Collection< unknown>'.

18 <li *ngFor="let item of items | async | paginate: { itemsPerPage: 12, currentPage: p }">{{ item }}

how can fix it ?

home.html :

 <div >
        <ul>
            <li *ngFor="let item of items | async  | paginate: { itemsPerPage: 12, currentPage: p }">{{ item }}</li>
        </ul>
        <pagination-controls (pageChange)='p = $event'></pagination-controls>
</div>

home.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Observable } from 'rxjs/internal/Observable';
import { ProductService } from '../services/product.service';
import { UserServiceService } from '../services/user-service.service';


@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
 
  items: Observable<any[]>  ;

  constructor(private db : AngularFireDatabase,private userS : UserServiceService,private pd: ProductService ) {
   this.items = this.pd.items
  }

product.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { map } from 'rxjs';
import { Observable } from 'rxjs/internal/Observable';
import { UserServiceService } from './user-service.service';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  items: Observable<any[]>;
  constructor(private db: AngularFireDatabase,private userS : UserServiceService) {
    this.getProducts()
  }
  getProducts(){
    this.items = this.db.list("collections").snapshotChanges().pipe(
      map(changes =>
        changes.map(c => ({ key: c.payload.key, ...c.payload.val() as {} }))

      )
    );
  }
}

Answer 1

The type is getting lost inside the javascript map, here you need to just manually set it like so.

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { map } from 'rxjs';
import { Observable } from 'rxjs/internal/Observable';
import { UserServiceService } from './user-service.service';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  items: Observable<any[]>;
  constructor(private db: AngularFireDatabase,private userS : UserServiceService) {
    this.getProducts()
  }
  getProducts(){
    this.items = <Observable<Array<any>>>this.db.list("collections").snapshotChanges().pipe(
      map(changes =>
        <Array<any>>changes.map(c => <any>({ key: c.payload.key, ...c.payload.val() as {} }))
      )
    );
  }
}

Answer 2

Indeed Error is in html side. But the error is indicating that this is the error of two types the types are not matching with eachother.

TRY FOLLOWING THINGS It Might Help You

1- use null/undefine check ! as it is saying that it is not assignable to any[] | null and use $ with the variable you are making Observable it is professional practice for declaring Observable Variable

items$!: Observable<any[]>;

2- I was if you have any class or interface for items provide it to Observable.

items$!: Observable <itemsSchema[] | any>;

3- I was facing the same issue and my Observable Variable was like this

variable$!: Observable<mySchema[]>;

and then I used this to solve my issue

variable$!: Observable<mySchema[] | any>;

4- As the issue for both of us is same but the database and function techniques are different, So by using one of the above method, specially 2 it might produce some other incompatibility minor errors or something other. So I would recommend to not panic and just try to make some minor changes in your code