时间戳

首页 > 解决方案 > 使用 AngularFireList 时出错，数据检索

database - 使用 AngularFireList 时出错，数据检索

问题描述

我已成功按照本教程将数据记录到我的 Firebase 数据库。但是，在学习本教程时，我意识到他使用的是“FirebaseListObservable”，现在已更新为“AngularFireList”。我改变了这个，为了让它工作，我必须确保我将我的交易作为一个对象而不是他所做的一个数组。

我的代码：transactionRef$: AngularFireList<transaction>

他的代码：shoppingItemRef$: FirebaseListObservable<ShoppingItem[]>

正如我所说，这修复了我的错误，并且我的数据已正确记录到数据库中。但是，当继续阅读教程并尝试实现数据检索时，我很快收到了这个错误：

错误：InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”

HTML

<ion-content padding>
    <ion-list>
        <ion-item *ngFor="let transaction of transactionRef$ | async">
            <h2>Currency: {{transaction.transactionCurrency}}</h2>
            <h3>Amount: {{transaction.transactionAmount}}</h3>
            <h4>Receiver: {{transaction.transactionReceiver}}</h4>
        </ion-item>
    </ion-list>
</ion-content>

TS

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'; 
import { transaction } from '../../models/transaction/transaction.interface';

@Component({
  selector: 'page-view',
  templateUrl: 'view.html',
})
export class ViewPage {

  transactionRef$: AngularFireList<transaction>

  constructor(public navCtrl: NavController,public navParams: NavParams, private database: AngularFireDatabase) {

    this.transactionRef$ = this.database.list('transaction');
  }
}

为了解决这个问题，我改变了这一行：<ion-item *ngFor="let transaction of transactionRef$ | async">

至：<ion-item *ngFor="let transaction of transactionRef$">

但是，这给了我以下错误：

错误：找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

阅读这两个错误后，很明显错误是由于对象和数组类型不兼容。但是，我不知道如何解决这个问题。我已经阅读了多篇关于有这两个错误的帖子，但大多数人要么使用 JSON（我不是），要么使用“FirebaseListObservable”，因此可以通过将其从对象更改为数组或省略来修复他们的错误“| aysnc”，这两个都不适合我。

任何帮助将不胜感激。

标签： databaseangularfirebaseionic3data-retrieval

解决方案

如果你想Observable<Response>从AngularFireList5.x 开始，使用valueChanges()函数。

this.transactionRef$ = this.database.list('transaction').valueChanges();

参考 - https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md#50

推荐阅读