在 Ionic App 中显示来自 Firebase 实时数据库的数据答案

【问题标题】：Display data from Firebase Realtime Database in Ionic App在 Ionic App 中显示来自 Firebase 实时数据库的数据
【发布时间】：2021-08-23 15:36:47
【问题描述】：

我想在我的 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 :????&gt;&gt;&gt;&gt;&gt;&gt;&gt;{"-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());

【问题讨论】：

使用关键字function之后会使打字稿不起作用，将函数（数据）替换为（数据）=>
在那之后你会看到打字稿错误，然后它就是 this.requests = jsonRequest 这应该可以解决问题，但首先要确保用我在上面的评论中所说的改变单词 function。 .
这两件事我都做了。数据仍未显示在中，我在控制台中收到以下错误 - `InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'`
首先你正在做的整个操作是错误的，你正在使用 json 解析然后 json strinfigy 这是奇怪的事情，只需执行 console.log(data) 并附上查看的响应网络控制台到你的问题，所以我可以为你提供解决方案..
当我使用 console.log(data) 时，它只会在控制台中给我 [object Object] 并出现相同的错误 InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'。

标签： javascript angular firebase ionic-framework

【解决方案1】：

您将requests 声明为Promise<any[]> 并对其进行访问，但我看不到它在哪里分配了一个承诺值。
你 console.log 变量 jsonRequest，然后将 requests 设置为 this.jsonRequest;。

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

【讨论】：

我不仅是 Angular 的新手，也是 Javascript 的新手。我只是在尝试一些东西，看看它是否有效。你能告诉我该怎么做吗？

【解决方案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" 并保留与字段名称相同的内容，它将获得其值..

【讨论】：