InvalidPipeArgument: '[объект объекта]' AsyncPipe Ionic Angularfire2

Question

Ошибка: InvalidPipeArgument: '[объект объекта]' для канала 'AsyncPipe'

feed.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, MenuController } from 'ionic-angular';
import { ItemDetailsPage } from '../item-details/item-details';
import { AngularFireAuth } from 'angularfire2/auth';
import { UserService } from '../../providers/user-service/user-service';
import { AngularFireList, AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { Items } from '../../models/item_interface';
import { ItemService } from '../../providers/item-service/Item-service';


@IonicPage()
@Component({
    selector: 'page-feed',
    templateUrl: 'feed.html',
})
export class FeedPage {

    item = 'Found';

    constructor(public navCtrl: NavController,
                public navParams: NavParams,
                public menu: MenuController,
                private db: AngularFireDatabase,
                private iServ: ItemService)
    {
        this.menu.swipeEnable(true);
    }

    itemName(type:any) {
        this.items = this.db.list(`items/${type}`);
        return this.items;
    }

    getDetails(itemN: any) {
        this.navCtrl.push(ItemDetailsPage,{item: itemN});
    }

    getColor(item) {
        return (item === "Found")
                   ? "primaryGreen"
                   : "primaryRed";
    }
}

feed.html:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title text-center>Feed</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
    <h2 text-center>{{ item }}</h2>

    <ion-segment [(ngModel)]="item" color="primaryBlack">
      <ion-segment-button value="Found">
        <ion-icon name="hand"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="Lost">
        <ion-icon name="help"></ion-icon>
      </ion-segment-button>
    </ion-segment>

    <ion-list style="margin:0" inset>
      <button ion-item detail-none *ngFor="let i of (itemName(item) | async)" (click)="getDetails(i)">
        <ion-card padding [color]="getColor(item)">
          Item: {{ i?.itemN }} <br>
          <!-- Location: {{ i.itemLocation }} <br>
          Description: {{ i.itemDescription }} <br> -->
          <p style="color:#f6f6f6;font-size: 9px; margin-top: 5px">Posted by: </p>
        </ion-card>
      </button>
    </ion-list>
</ion-content>

Item-service.ts:

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Items } from '../../models/item_interface';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable()
export class ItemService {

    items: AngularFireList<Items>;
    userId: string;

    constructor(private db: AngularFireDatabase, private aAuth: AngularFireAuth) {
        this.aAuth.authState.subscribe(user => {
            if (user)
                this.userId = user.uid;
        })
    }

    getItems(query: string):AngularFireList<Items>{
        if(!this.userId)
            return;
        this.items= this.db.list(`items/${query}`);
        return this.items;
    }

    createItem(item: Items,query:string){
        this.items = this.getItems(query);
        item.userId = this.userId;
        this.items.push(item);
    }
}

Items:

export interface Items {
    itemN:string;
    itemLocation: string;
    itemDescription: string;
    userId: string;
}

Я прошел через многие решения, но не смог понять это.Некоторые предлагали использовать список в качестве наблюдаемого списка.Список наблюдаемых теперь был изменен на AngularFireList.Может кто-нибудь, пожалуйста, помогите мне?

Answer 1

Ошибка была с моей более старой версией rxjs @ 5.Когда я обновил rxjs @ 6 и добавил его, чтобы его можно было наблюдать, изменив его на snapshotChanges (), он работал.

Вы можете проверить версию rxjs, используя список npm --depth = 0

itemName(type:any){
    this.db.list(`items/${type}`).snapshotChanges().subscribe(
      list => {
        this.itemArray = list.map(i => {
          return {
            $key: i.key,
            ...i.payload.val()
          }
        });
      }
    );
    return this.itemArray;
  }

Answer 2

Ваша проблема в том, что ваша функция itemName возвращает не наблюдаемый, а объект AngularFireList объект, и для того, чтобы сделать наблюдаемый из него, вам нужно вызвать функцию valueChanges() или snapshotChanges(), но сейчас просто используйтепервый будет намного проще для вас.Измените свою функцию как:

itemName(type:any){
  this.items = this.db.list(`items/${type}`).valueChanges();
  return this.items;
}