FirebaseList - Невозможно получить доступ к данным разбора, полученным из firebase

Я получаю "Ошибка: InvalidPipeArgument:" [объект объекта] "для канала" 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();
}

поставщик огненной базы

  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);
  }

огненная база дб

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

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

Заранее спасибо за помощь.

Источник

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() возвращает Observable без каких-либо метаданных. Если вы уже сохраняете ключ как свойство, у вас все в порядке. Однако, если вы полагаетесь на $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()

Источник

Импортировать на page.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;

  }
 }

Ваша модель торгового объекта

 export interface ShoppingItem{
  key?:string;
  }
Источник

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

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

  }

  ionViewDidLoad() {
    this.shoppingItems = this.firebaseProvider.getShoppingItems();
    console.log(this.shoppingItems);
  }
Источник
Другие вопросы по тегам