InvalidPipeArgument：'[object Object]'AsyncPipe离子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);
    }
}

项目：

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

我经历了很多解决方案，但无法弄清楚。一些建议将列表用作可观察列表。现在，可观察列表已更改为AngularFireList。有人可以帮我吗？

Answer 1

您的问题是您的函数itemName返回的不是可观察对象，而是一个AngularFireList对象的对象，要使之成为可观察对象，您需要调用函数valueChanges()或{{1 }}，但现在仅使用第一个，对您来说会简单得多。更改您的功能，例如：

snapshotChanges()

Answer 2

错误与我的旧版本rxjs @ 5有关。当我更新到rxjs @ 6并将其添加为可观察到时，将其更改为snapshotChanges（）即可。

您可以使用npm list --depth = 0来检查rxjs的版本

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