Ionic和Firebase angularFire2 5.0.0 InvalidPipeArgument:' [object Object]' for pipe' AsyncPipe'

时间:2017-10-14 18:48:48

标签: angular firebase firebase-realtime-database ionic3 angularfire2

im newbe,基本上我试图在我的HortalicasPage中显示一个简单的列表,我错过了什么?

我已经多次尝试但没有成功,我缺少什么?

很抱歉这个问题,但我是初学者。非常感谢你

stackoverflow不允许我发布问题,因为这声称它有太多的代码和很少的描述,我也很抱歉

hortalicas.ts

import { Component } from '@angular/core';
import { NavController, Item } from 'ionic-angular';
import { DetalheHortalicaPage } from '../detalhe-hortalica/detalhe-hortalica';
import { AngularFireDatabase, AngularFireList } from "angularfire2/database";
import { FirebaseProvider } from '../../providers/firebase/firebase';
import { Observable } from 'rxjs/Observable';



@Component({
  selector: 'page-hortalicas',
  templateUrl: 'hortalicas.html'
})
export class HortalicasPage {
  HortalicasList

  constructor(public navCtrl: NavController, 
    public firebaseProvider: FirebaseProvider, 
    afDb: AngularFireDatabase) {

      this.HortalicasList = firebaseProvider.getListHortalicias();

      console.log(this.HortalicasList);

      //this.database.list('shopping-list').valueChanges();;
  //  const HortalicaList = this.firebaseProvider.getListHortalicias();
  //this.HortalicaList = this.firebaseProvider.getListHortalicias().valueChanges().subscribe(console.log);
 // this.firebaseProvider.getListHortalicias().valueChanges().subscribe(console.log);
    //console.log(this.firebaseProvider.getListHortalicias().valueChanges());
    //firebaseProvider.getListHortalicias().valueChanges().subscribe(console.log);
    //afDb.list<Item>('hortalicas').valueChanges().subscribe(console.log);

  }
  goToDetalheHortalica(params){
    if (!params) params = {};
    this.navCtrl.push(DetalheHortalicaPage);
  }
}

hortalicas.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Hortalicas
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding id="page6">
  <ion-list id="hortalicas-list7">
    <ion-searchbar placeholder="Buscar Hortaliça" name="SearchBarHortailica" id="hortalicas-search1"></ion-searchbar>
     <ion-item-sliding *ngFor="let item of HortalicasList | async">
        <ion-item color="none" on-click="goToDetalheHortalica()" id="hortalicas-list-item19">
          <ion-thumbnail item-left>
            <img />
          </ion-thumbnail>
          <h2>
              {{ item.name }}
              1
          </h2>
        </ion-item>
      </ion-item-sliding>
  </ion-list>
</ion-content>

provider firebase.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { AngularFireDatabase } from "angularfire2/database";
import { Item } from 'ionic-angular';
/*
  Generated class for the FirebaseProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class FirebaseProvider {

  constructor(public afd: AngularFireDatabase) {
    console.log('Hello FirebaseProvider Provider');
  }

  getListHortalicias(){
    return this.afd.list<Item>('hortalicas')
  }


}

谢谢

1 个答案:

答案 0 :(得分:0)

这只是一个示例代码,因为代码很难被读取,因为代码太多了。希望你能将它转换成你的用例。

hortalicasList : AngularFireList<any>;

constructor(){}

gethortalicasList  = (ev: any) : AngularFireList<any> {
  this.hortalicasList =  this.afDatabase.list('/Hortalicas', {
       query:{
        }
      }
     ).valueChanges();

    return this.hortalicasList;
}