从Firebase获取列表时出现Ionic运行时错误求助

Hey folks, I'm new to Angular and working through an Ionic+Firebase tutorial on YouTube. The catch is I'm using the most up-to-date dependency versions available right now:

• node v8.9.4
• 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

When I try to run my project, I hit a runtime error. Before posting here, I went through several solutions for similar issues but none of them fixed my problem. I'd really appreciate any help you can offer!

Relevant Code #

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>

What I've Tried So Far #

• UPDATE 1: I changed posts: AngularFireList<any[]> to posts: AngularFireList<{}> which resolved the syntax error, but the runtime error still persists.
• UPDATE 2: If I comment out the posts: AngularFireList<{}> line entirely, the project runs without issues. But this isn't a real solution since I need that property to handle the posts data.

内容的提问来源于stack exchange，提问作者juniortan