在Ionic App中显示Firebase实时数据库中的数据

Question

我想要在我的firebase实时数据库中显示"Requests“的所有子项。这是我的实时数据库的样子：

​

​

到目前为止，我已经能够以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(数据)后，我得到以下输出：

​

​

重新编辑：

console.log(data.val())；

​

​

Answer 1

1. 您以Promise<any[]>的身份声明和访问requests，但我看不到它在何处被赋值，这是一个promise。

将变量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 of requests”，并保留与字段名相同的内容，它就会得到它的值。