Typescript 从Ionic中的firebase数据库检索列表

我试图从数据库中的列表中检索数据，并将其显示在我的Ionic应用程序中。我的数据库如下：

在我的例子中，我想从数据库中的Notifications文件夹中检索所有数据，并在我的应用程序中显示它们

我的来源代码如下：

home.hmtl

<ion-header>
   <ion-navbar color="primary">
      <ion-title>
         Notifications
      </ion-title>
   </ion-navbar>
</ion-header>




<ion-content class="background">
<h2>Notifications</h2>
<ion-list>
<ion-item *ngFor="let notification of notifications | async"></ion-item>
{{notification.description}}
{{notification.title}}
</ion-list>
</ion-content> 

通知
通知
{{notification.description}}
{{notification.title}}

和home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import firebase from 'firebase';

    export class HomePage {

      notification:Observable<any>;
      constructor(public navCtrl: NavController, public afd: AngularFireDatabase, public http: HttpClient) {
        let notification = this.afd.list('Notifications');

      }
    }

从'@angular/core'导入{Component}；
从'ionic angular'导入{NavController}；
从“angularfire2/database”导入{AngularFireDatabase}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs/Observable”导入{Observable}；
从“firebase”导入firebase；
导出类主页{
通知：可见；
构造函数（公共navCtrl:NavController、公共afd:AngularFireDatabase、公共http:HttpClient）{
let notification=this.afd.list（'Notifications'）；
}
}

每次在我的web explorer（“ionic serve”）中运行应用程序时，我都会遇到以下错误：TypeError:无法读取未定义的属性“description”

谁能解释一下我做错了什么？

---

首先，感谢您在ion项目之外访问通知标题和说明

试着改变这个

<ion-list>
<ion-item *ngFor="let notification of notifications | async"></ion-item>
{{notification.description}}
{{notification.title}}
</ion-list>

{{notification.description}}
{{notification.title}}

对此

<ion-list>
  <ion-item *ngFor="let notification of notifications | async">
    <p>{{notification.description}}</p>
    <p>{{notification.title}}</p>
  </ion-item>
</ion-list>

 notifications:Observable<any>;
  constructor(public navCtrl: NavController, public afd: AngularFireDatabase, public http: HttpClient) {
    this.notifications = this.afd.list('Notifications');
  }

{{notification.description}}

{{notification.title}}

其次，您似乎还试图绑定来自HTML的通知，但类中的变量没有s

尝试更改此代码

  notification:Observable<any>;
  constructor(public navCtrl: NavController, public afd: AngularFireDatabase, public http: HttpClient) {
    let notification = this.afd.list('Notifications');
  }

通知：可见；
构造函数（公共navCtrl:NavController、公共afd:AngularFireDatabase、公共http:HttpClient）{
let notification=this.afd.list（'Notifications'）；
}

对此

<ion-list>
  <ion-item *ngFor="let notification of notifications | async">
    <p>{{notification.description}}</p>
    <p>{{notification.title}}</p>
  </ion-item>
</ion-list>

 notifications:Observable<any>;
  constructor(public navCtrl: NavController, public afd: AngularFireDatabase, public http: HttpClient) {
    this.notifications = this.afd.list('Notifications');
  }

通知：可见；
构造函数（公共navCtrl:NavController、公共afd:AngularFireDatabase、公共http:HttpClient）{
this.notifications=this.afd.list（'notifications'）；
}

更新： 此行

This.notifications=This.afd.list（'notifications'）
应该是
this.notifications=this.afd.list（'notifications'）.valueChanges（）
从'@angular/core'导入{Component}；
从“angularfire2/database”导入{AngularFireDatabase，AngularFireList}；
从“rxjs”导入{observatable}
从'@angular/core/src/render3'导入{query}；
类项目{
建造师（公开名称）{}
}
@组成部分({
选择器：“app-tab1”，
templateUrl:'tab1.page.html'，
样式URL:['tab1.page.scss']
})
导出类选项卡1页{
公共书籍：AngularFireList；
项目：可观察；
构造函数（db:AngularFireDatabase）{
this.items=db.list（'Notifications'，ref=>{
返回ref.orderByChild（'id'）
}).valueChanges（）；
}
}
导出类AppComponent{
}
我现在在this.notifications=this.afd.list（'notifications'）一行中得到一个错误；类型AngularList不可分配给类型ObservalEAH，这是因为我们试图将特定的数据类型放入不接受该数据类型的变量中。我不熟悉AngularFire，但快速查看一下他们的文档，就会发现我们应该添加“.valueChanges（）；”，因此行是this.notifications=this.afd.list（'notifications'）.valueChanges（）；这应该可以工作，这还可以为您提供实时更新。如果我的答案解决了您的问题，请选择我的答案作为解决方案：）