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 {} }))

      )
    );
  }
}

What would happen if you were to try and wrap those in parenthesis to specify order of operations. I am wondering if the chained pipes confuse the application — SomeStudent, Aug 21 '22 at 00:52

Naren Murali · Answer 1 · 2022-08-21T07:26:14.367

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 {} }))
      )
    );
  }
}

edited Aug 21 '22 at 07:26

answered Aug 21 '22 at 05:32

Naren Murali

19,250
3
27
54

still giving error – zafer Aug 21 '22 at 07:16
@zafer could you try this? – Naren Murali Aug 21 '22 at 07:26
error is in html side https://prnt.sc/RhpZzL5Ktt5a – zafer Aug 21 '22 at 07:28

score 0 · Answer 2 · answered Nov 23 '22 at 07:46

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

ngx pagination for Observable array

2 Answers2