FirebaseList - не удается открыть обработку данных, получаемых от опорного пункта

Я получаю " Error: InvalidPipeArgument: '[object Object] 'for pipe 'AsyncPipe' " при выполнении следующего кода.

Html шаблон: 

 <ion-list>
    <ion-item-sliding *ngFor="let item of shoppingItems | async">
      <ion-item>
        {{ item.$value }}
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="danger" icon-only (click)="removeItem(item.$key)"><ion-icon name="trash"></ion-icon></button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

Страница ts: 

shoppingItems: AngularFireList<any>;
constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider) {
    this.shoppingItems = this.firebaseProvider.getShoppingItems();
}

Поставщик Firebase 

  constructor(public afd: AngularFireDatabase) {
    console.log('Hello FirebaseProvider Provider');
    console.log("Shopping items"+afd.list('/shoppingItems/'))
  }

  getShoppingItems() {

    console.log("Shopping items"+this.afd.list('/shoppingItems/'))
    return this.afd.list('/shoppingItems/');
  }
  addItem(name) {
    this.afd.list('/shoppingItems/').push(name);
  }

Firebase db 

shoppingItems
 -KxmiUt64GJsPT84LQsI: "qwerty"
 -KxmifqyfD41tRPwFh07: "key"

Из веб-приложения я смог добавить элементы в firebase db. Но я не смог передать данные с базы огня. Я получаю вышеупомянутую ошибку.

Заранее благодарю за помощь.

3 4
ionic-framework

3 ответа:

AngularFire2 V5

this.afd.list('/shoppingItems/') не возвращает асинхронную наблюдаемую, которая должна работать с async каналом. Он возвращает ссылку на список в базе данных реального времени. Вам нужно использовать valueChanges(), чтобы вернуть это.

В вашем провайдере верните наблюдаемое, 

 getShoppingItems() {

    console.log("Shopping items"+this.afd.list('/shoppingItems/'))
    return this.afd.list('/shoppingItems/').valueChanges();//here
  }

Если вы получаете доступ через $key/$value, Проверьте детали обновлениядля angularfire2 v4 до 5 . Это происходит потому, что FirebaseList устарел и AngularFireList теперь возвращается из версия 5.

Звоню .valueChanges() возвращает наблюдаемое без каких-либо метаданных. Если вы уже сохраняете ключ как свойство, то вы в порядке. Однако, если вы полагаетесь на $key, то вам нужно использовать .snapshotChanges ()

Вам нужно использовать snapshotChanges() 

 getShoppingItems() {

    console.log("Shopping items"+this.afd.list('/shoppingItems/'))
    return this.afd.list('/shoppingItems/').snapshotChanges();//here
  }

Для доступа к $key или $value в html, используйте item.payload.key и item.payload.val()

4

Добавьте ionViewDidLoad жизненный цикл в файл home.ts и вместо конструктора загрузите свой элемент в ionViewDidLoad, Замените конструктор следующим кодом 

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

  }

  ionViewDidLoad() {
    this.shoppingItems = this.firebaseProvider.getShoppingItems();
    console.log(this.shoppingItems);
  }
0

Импорт на странице.ts

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { AngularFireDatabase} from 'angularfire2/database';
 import { Observable } from "rxjs/Observable";
 import { ShoppingItem } from '../../model/shoppingitem';

Импортируйте своего провайдера правильным способом из вашего провайдера 

 import { FirebaseProvider } from '../../providers/firebase/firebase';

 export class Page {

  shoppingItems:Observable<ShoppingItem[]>;

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

                this.shoppingItems=this.firebaseProvider
                .getShoppingItem()
                .snapshotChanges()
                .map(
                  changes=>{
                    return changes.map(c=>({
                      key:c.payload.key, ...c.payload.val(),
                    }));
                  }
                );
          }
        }

     }

FirebaseProvider

Примечание 'shopping-list' - это таблица в базе данных firebase 

  private itemListRef = this.afDatabase.list<ShoppingItem>('shopping-list');

  constructor(private afDatabase: AngularFireDatabase) {}

 .getShoppingItem(){

   return this.itemListRef;

  }
 }

Ваша модель shoppingitem 

 export interface ShoppingItem{
  key?:string;
  }
0