Help Virtual scroll whit Firebase data

Ionic Framework ionic-v3
1

got this error for 3 days now and cant resolve it…
Tryin to load data from firebase into a Virtual scroll…

the HTML

<ion-content padding >
   
    <ion-list [virtualScroll]="posts | async"> 
            <ion-item *virtualItem="let post">
                  {{post.comentario}}
            </ion-item>
    </ion-list>

</ion-content>

the .TS

posts: FirebaseListObservable<Post[]>;

constructor(public navCtrl: NavController, public provider: AngFireProvider, public af:AngularFireDatabase,
              ) {  }

   ngOnInit() {
    this.posts = <FirebaseListObservable<Post[]>> this.af.list('/posts', {
      query: {
        orderByChild: 'timestamp'
      }
    }).map((listPosts: Post[]) => { 
      return listPosts.reverse(); });
   }

the error:
Capturar

any help would be very much appreciated!!
thanks alot for your time

2

I realize this use of the async pipe is common, but I don’t like it. The template shouldn’t know or care about the timing of assignment or changes to things it is bound to. That should be solely the page controller’s concern, so that if things change, no modifications to the template is required.

If, instead, you declare posts simply as Post[] (and initialize it to an empty array), get rid of the async pipe, and subscribe to the FirebaseListObservable with code to update this.posts, I think this would be cleaner and your problem will have been designed away.

4

hello, i got the idea but im kind new in ionic so…

i create:
postsss: Post[] = [];

and update the ngOnInit

ngOnInit() {
    this.posts = <FirebaseListObservable<Post[]>> this.af.list('/posts', {
      query: {
        orderByChild: 'timestamp'
      }
    }).map((listPosts: Post[]) => { 
      return listPosts.reverse(); });

      this.posts.subscribe(items => { this.postss = items; });
   }

the error is gone… but all the content is loaded and show into the page… not only few items as intended…

5

If you insist on keeping the observable as a property, I would rename it something like postsSource to reflect that, and reserve posts for the actual array of posts you wish to be displayed in the template.

If this is somehow a subset of what is currently being displayed, you are going to have to have another map stanza that filters it down.