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

【问题标题】：Retrieve List from firebase Database in Ionic从 Ionic 的 firebase 数据库中检索列表
【发布时间】：2019-03-10 04:12:12
【问题描述】：

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

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

我的源代码如下：

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>

和 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');

      }
    }

每次在我的 web-explorer("ionic serve") 中运行应用程序时，我都会收到以下错误：TypeError: Cannot read property 'description' of undefined

谁能解释一下我做错了什么？感谢您的问候

【问题讨论】：

标签： typescript firebase ionic-framework firebase-realtime-database

【解决方案1】：

首先，您似乎正在尝试访问 ion-item 之外的通知标题和描述

尝试改变这个

<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();

【讨论】：

我现在在 this.notifications = this.afd.list('Notifications');类型 AngularList 不可分配给类型 Observable
啊，那是因为我们试图将特定数据类型放入不接受该数据类型的变量中。我不熟悉 AngularFire，但快速浏览他们的文档说我们应该添加“.valueChanges();”所以这条线是 this.notifications = this.afd.list('Notifications').valueChanges();这应该可以工作，这还可以为您提供实时更新。
如果我的回答解决了您的问题，请选择我的回答作为解决方案:)

【解决方案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 {

}

【讨论】：