在 Ionic 应用程序中显示来自 Firebase 实时数据库的数据

Question

我想在我的 firebase 实时数据库中以类似 . 这是我的实时数据库的样子：

到目前为止，我已经能够以 JSON 的形式从 firebase 获取数据。

requests.page.ts

import { Component, OnInit } from '@angular/core';
import { from, Observable } from 'rxjs';
import { RequestsService } from '../requests.service';
import { AngularFireDatabase,AngularFireList } from '@angular/fire/database';
import { element } from 'protractor';

u/Component({
 selector: 'app-requests',
 templateUrl: './requests.page.html',
 styleUrls: ['./requests.page.scss'],
})
export class RequestsPage implements OnInit {
 requests:Promise<any[]>;
 requestsList : any[] = [];

constructor(
 private requestsService: RequestsService,
 private firebaseDB: AngularFireDatabase,
  ) { }

 ngOnInit() {

    {  var ref = this.firebaseDB.database.ref('/Requests/').once('value').then(function (data){

 var jsonRequest = JSON.parse(JSON.stringify( data.val()));
 console.log("JSONREQUEST :????>>>>>>>" + JSON.stringify(jsonRequest) );
 requests = this.jsonRequest;
 
    })
  }

}

requests.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>requests</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor = "let r of requests | async">
      <ion-label class="ion-text-wrap">
        {{r.name}}<br>
        <p>{{r.bloodGroup}}</p>
      </ion-label>
    </ion-item >
  </ion-list>
</ion-content> 

我把它放在控制台中

JSONREQUEST :????>>>>>>>{"-MaTAKR8qxebin2dcVhp":{"ID":"Request","bloodGroup":"AB+","location":"Kolkata","message":"Need Blood Urjently","name":"Hemant Baid","phoneNumber":"7865436789","reason":"Thalassemia","timestamp":1621856442436,"type":"Whole Blood","uid":"Bstt2BRdvAPodfSlUT9367a8DB52"},"-MaTvIvdjH1XpN7mHfoi":{"ID":"Request","bloodGroup":"AB+","location":"Kolkata","message":"f","name":"Hemant Baid","phoneNumber":"7865436789","reason":"Thalassemia","timestamp":1621869019139,"type":"Whole Blood","uid":"Bstt2BRdvAPodfSlUT9367a8DB52"},"-MaU01T98spFheBGXdEh":{"ID":"Request","bloodGroup":"AB+","location":"Kolkata","message":"a","name":"Hemant Baid","phoneNumber":"7865436789","reason":"Thalassemia","timestamp":1621870520547,"type":"Whole Blood","uid":"Bstt2BRdvAPodfSlUT9367a8DB52"},"-MaU3-PF5JDxBgr4dMkK":{"ID":"Request","bloodGroup":"A+","location":"Mumbai","message":"a","name":"Hemant Baid","phoneNumber":"7865436789","reason":"Transplant","timestamp":1621871298520,"type":"Whole Blood","uid":"Bstt2BRdvAPodfSlUT9367a8DB52"},"-MaUDTcYPNvCoxoNTze-":{"ID":"Request","bloodGroup":"AB+","location":"Siliguri,West Bengal","message":"qwert","name":"Hemant Baid","phoneNumber":"7865436789","reason":"Transplant","timestamp":1621874043756,"type":"Double Red Cell","uid":"Bstt2BRdvAPodfSlUT9367a8DB52"},"-MaUSkPxPlM-ihK00cVa":{"ID":"Request","bloodGroup":"B-","location":"Delhi","message":"hsodn","name":"Nilabja Das ","phoneNumber":"9876545678","reason":"Other","timestamp":1621878049000,"type":"I don't know","uid":"L0A6M57zXJaXzoSp1RCZMD5WCXm2"},"-MaUTBArFaLAy_TV0SeO":{"ID":"Request","bloodGroup":"AB-","location":"Kandi,West Bengal","message":"location test","name":"Nilabja Das ","phoneNumber":"9876545678","reason":"Thalassemia","timestamp":1621878162707,"type":"Cord Blood","uid":"L0A6M57zXJaXzoSp1RCZMD5WCXm2"}}

编译后列表为空，屏幕上没有显示任何内容。有人可以解释一下我做错了什么。

编辑： 然后删除里面的所有内容并且只有 console.log(data) 我得到这个输出：

重新编辑：

console.log(data.val());

Answer 1

1. 您将 requests 声明并访问为 Promise<any[]>，但我没有看到它在哪里分配了一个承诺值。

2. 您console.log 变量jsonRequest，但随后将requests 设置为this.jsonRequest;。

#1 可能在技术上实际上并不重要，我对 Angular 不够熟悉，无法肯定地说，但它似乎仍然是错误的......

Answer 2

import { Component, OnInit } from '@angular/core';
import { from, Observable } from 'rxjs';
import { RequestsService } from '../requests.service';
import { AngularFireDatabase,AngularFireList } from '@angular/fire/database';
import { element } from 'protractor';

u/Component({
 selector: 'app-requests',
 templateUrl: './requests.page.html',
 styleUrls: ['./requests.page.scss'],
})
export class RequestsPage implements OnInit {
 requests:Promise<any[]>;
 requestsList : any[] = [];

constructor(
 private requestsService: RequestsService,
 private firebaseDB: AngularFireDatabase,
  ) { }

 ngOnInit() {

    {  var ref = this.firebaseDB.database.ref('/Requests/').once('value').then((data) => {
    const response_data = data.val();
    const requests = [];
    for (const key in response_data) {
         if (response_data.hasOwnProperty(key)) {
             requests.push(response_data[key]);
        }
    }

     this.requests = requests;
    })
  }

}

为了在 html 中预览，只需放置 *ngFor="let request of requests" 并保留您所做的与字段名称相同的内容，它将获得其值..