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

Question

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

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

我的源代码如下：

home.hmtl

var array = ["666", "321", "333"],
    sum = array.reduce((s, v) => s + +v, 0);
    
console.log(sum);

和home.ts

<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> 

每次我在我的网络浏览器中运行应用程序（“离子服务”）时，我都会收到以下错误：TypeError：无法读取未定义的属性'description'

任何人都可以解释一下我做错了什么吗？ 谢谢你的问候

Answer 1

首先，您似乎正在尝试访问离子项

之外的通知标题和说明

尝试更改此

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

到这个

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

其次，您似乎也在尝试绑定HTML中的通知，但您班级中的变量没有 s 。

尝试更改此代码

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

到这个

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

<强>更新 这一行this.notifications = this.afd.list('Notifications'); 应为this.notifications = this.afd.list('Notifications').valueChanges();

Answer 2

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs'
import { query } from '@angular/core/src/render3';

class item {
  constructor(public title) { }
}
@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html', 
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

        public books: AngularFireList<item[]>;
          items: Observable<any[]>;
          constructor(db: AngularFireDatabase) { 
            this.items = db.list('Notifications',ref => {
              return ref.orderByChild('id')

                  }).valueChanges();
            }

}
export class AppComponent {

}