Property ‘indexOf’ does not exist on type 'FirebaseListObservable<any[]> - firebase

Question

I am trying to iterate and find the index of items in a Firebase backend and swipe right and left through these:
export class articleSwiperComponent implements OnInit {
articles: FirebaseListObservable<any[]>;
public orientation: Orientation;
public selectedArticle: article;
private changeDetectorRef: ChangeDetectorRef;
constructor(private af: AngularFire, changeDetectorRef: ChangeDetectorRef) {
this.articles = af.database.list('/articles');
this.changeDetectorRef = changeDetectorRef;
this.orientation = "none";
this.selectedArticle = this.articles[ Math.floor( Math.random() * this.articles.length ) ];
}
I have methods to swipe through the the database articles which will randomly bring forward an article upon first navigating to this page.
public showNextArticle() : void {
this.orientation = "next";
this.changeDetectorRef.detectChanges();
var index = this.articles.indexOf( this.selectedArticle );
this.selectedArticle = this.articles[ index + 1 ]
? this.articles[ index + 1 ]
: this.articles[ 0 ]
;
}
public showPrevarticle() : void {
this.orientation = "prev";
this.changeDetectorRef.detectChanges();
// Find the currently selected index.
var index = this.articles.indexOf( this.selectedArticle );
this.selectedArticle = this.articles[ index - 1 ]
? this.articles[ index - 1 ]
: this.articles[ this.articles.length - 1 ]
;
}
}
However I am getting Property ‘indexOf’ does not exist on type 'FirebaseListObservable<any[]> Property 'length' does not exist on type 'FirebaseListObservable<any[]> errors. What is the equivalent of these properties in Firebase?

Answer 1

I believe your problem is that you're not really working with an array, you're working with an AngularFire Observable (which is effectively an RXJS Observable). This means you would need to subscribe to the observable in order to get the real value of the array, as the observable is used to emit new values of the array as the data changes. See below...
export class articleSwiperComponent implements OnInit, OnDestroy {
public articles: any[] = [];
public orientation: Orientation = 'none';
public selectedArticle: article;
private _articlesSubscription: Subscription;
constructor(private af: AngularFire, private changeDetectorRef: ChangeDetectorRef) {}
ngOnInit() {
// Listen to database
this._articlesSubscription = this.af.database.list('/articles').snapshotChanges().subscribe((snapshot) => {
// Assign articles to local variable as they come in
this.articles = snapshot.map((d) => {
return { $key: d.key, ... d.payload };
});
// Only assign selected article if none assigned
if (!this.selectedArticle) {
this.selectedArticle = this.articles[ Math.floor( Math.random() * this.articles.length ) ];
}
});
}
ngOnDestroy() {
// Destroy listener to database
this._articlesSubscription.unsubscribe();
}
}
If you're not interested in listening to changes to the firebase database you could do this instead:
export class articleSwiperComponent implements OnInit, OnDestroy {
public articles: any[] = [];
public orientation: Orientation = 'none';
public selectedArticle: article;
constructor(private af: AngularFire, private changeDetectorRef: ChangeDetectorRef) {}
ngOnInit() {
// Listen to first emission from database
this.af.database.list('/articles').snapshotChanges().pipe(first()).subscribe((articles) => {
// Assign articles to local variable
this.articles = snapshot.map((d) => {
return { $key: d.key, ... d.payload };
});
this.selectedArticle = this.articles[ Math.floor( Math.random() * this.articles.length ) ];
});
}
}
No matter which option you choose, your showNextArticle() should work as you now have an array object to work from.