Ionic FirebaseListObservable错误

时间:2018-04-17 11:41:28

标签: angular firebase ionic-framework ionic3 angularfire2

我在使用angularfire2和 firebase Firebase 获取信息时出现问题。

的软件包:

  

“angularfire2”:“^ 5.0.0-rc.6.0”,

     

“firebase”:“^ 4.12.1”,

Home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase, FirebaseListObservable } from "angularfire2/database-deprecated";


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



export class HomePage {
  books: FirebaseListObservable<any[]>;

  constructor(public navCtrl: NavController, angFire: AngularFire) {
    this.books = angFire.database.list('/Books');
  }
  }

Home.html中

<ion-header>
  <ion-navbar>
    <ion-title>
      BookList Test
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only="addSong()">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
<h4>Book List With Firebase</h4>
<ion-list>
  <ion-item *ngFor="let book of books  | async">
  {{book.title}}
  {{book.author}}
</ion-item>
</ion-list>
</ion-content>

谢谢。

1 个答案:

答案 0 :(得分:0)

您仍有工作要做以获取数据。在home.ts中删除构造函数中的代码&amp;执行以下操作:

export class HomePage {
  books: FirebaseListObservable<any[]>;

  constructor(public navCtrl: NavController, private angFire: AngularFire) {}
    ngOnInit() {
       this.books = this.angFire.list('/Books').valueChanges();
  }
  }

现在书籍是可以发出数据的可观察量。在带有异步管道的html中使用它。