Ionic Runtime error when trying to retrieve list from firebase

Question

I am new to Angular.

I am following a tutorial on youtube for ionic with firebase.

But I am using latest modules as of the time of this post as compared to the tutorial

• node v.8.94
• npm 5.6.0
• cordova@8.0.0
• ionic@3.19.1
• rxjs@5.5.6
• angularfire2@5.0.0-rc.6
• firebase@4.9.0

I encountered an issue as shown in both the screen shot below,

On run Before creating this post I tried various solutions suggested in similar post but to no avail. Please help.

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FirebaseService } from './../../providers/firebase-service/firebase-service';
import { AngularFireList } from 'angularfire2/database/interfaces';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  posts: AngularFireList<any[]>;
  newPost: '';

  constructor(public navCtrl: NavController, public firebaseService: FirebaseService) {
    this.posts = this.firebaseService.getPosts();
  }

  addPost() {
    this.firebaseService.addPost(this.newPost);
  }

  removePost(id) {
    this.firebaseService.removePost(id);
  }
}

firebase-service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class FirebaseService {

  constructor(public afd: AngularFireDatabase) {}

  getPosts() {
    return this.afd.list('/posts/');
  }

  addPost(title) {
    this.afd.list('/posts/').push(title);
  }

  removePost(id) {
    this.afd.list('/posts/').remove(id);
  }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row justify-content-center>
      <ion-col col-8>
        <ion-item>
          <ion-input type="text" [(ngModel)]="newPost" placeholder="New post"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col col-auto>
        <button ion-button (click)="addPost()">Post!</button>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-list>
    <ion-item-sliding *ngFor="let post of posts | async">
      <ion-item>
        {{ post.$value }}
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="danger" icon-only (click)="removePost(post.$key)">
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

UPDATE1: Syntax error solved by changing

posts: AngularFireList<any[]>;

to

posts: AngularFireList<{}>;

but still getting the same runtime error.

UPDATE2: tried commenting out posts: AngularFireList<{}>;

App ran without error. But that's not a solution.

Answer 1

Found a better way to do this

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';  
import { Observable } from 'rxjs/Observable';
import { FirebaseService } from './../../providers/firebase-service/firebase-service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  posts: Observable<any[]>;

  constructor(public navCtrl: NavController, public firebaseService: FirebaseService) {
        this.posts = this.firebaseService
  .getPosts() // DB LIST
  .map(changes => {
    return changes.map(c => ({
      key: c.payload.key, ...c.payload.val()
    }))
  });
  }
}

firebase-service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class FirebaseService {
  private postsRef = this.db.list<any>('/posts');

  constructor(public afd: AngularFireDatabase) {}

  getPosts() {
    return this.postsRef.snapshotChanges();
  }
}

Answer 2

GetPosts from AngularFire returns generic AngularFireList. By defining AngularFireList you are saying that your list elements/items will be of type T. Now since AngularFireList already is enumerable (array like) type, you should define it with:

posts: AngularFireList<{}>;

This is saying that you are expecting "some" object. It's the same as writing any. You were defining it as a list of array (or two dimension array) which is not matching the type AngularFire service returns.

Answer 3

Have you tried:

posts: AngularFireList<{}>;