InvalidPipeArgument：'[object Object]' AsyncPipe Ionic Angularfire2答案

【问题标题】：InvalidPipeArgument: '[object Object]' AsyncPipe Ionic Angularfire2InvalidPipeArgument：'[object Object]' AsyncPipe Ionic Angularfire2
【发布时间】：2019-03-25 21:31:42
【问题描述】：

错误：InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”

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>

项目服务.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。有人可以帮帮我吗？

【问题讨论】：

嗨，所以看看你的代码，我认为你应该考虑重构它。基本上考虑一下 ngFor 作为经常被调用的东西，看看 javascript 必须做多少事情。你能在你的问题中添加你想要实现的更高层次的背景吗？比如来自 firebase 的渲染列表以及您所拥有的任何需求细节。
我终于找到了我的错误。错误是我的旧版本 rxjs@5。当我更新到 rxjs@6 并将其添加为可观察时，将其更改为 snapshotChanges() 它起作用了。我试图根据离子段确定的两个键显示数据。

标签： angular firebase ionic-framework firebase-realtime-database ionic3

【解决方案1】：

您的问题是您的函数itemName 返回的不是可观察对象而是对象AngularFireList 对象，并且要从中生成可观察对象，您需要调用函数valueChanges() 或snapshotChanges()，但现在只需使用第一个对你来说会简单得多。改变你的功能：

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

【讨论】：

我终于找到了我的错误。错误是我的旧版本 rxjs@5。当我更新到 rxjs@6 并将其添加为可观察时，将其更改为 snapshotChanges() 它起作用了。

【解决方案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;
  }

【讨论】：