未捕获（承诺）：错误：InvalidPipeArgument：'[object Object]' for pipe'

Question

您好，我需要帮助解决这个问题： 这个错误是什么意思？ 我想不通，我尝试了很多东西，但没有任何效果
帮助。这是我的代码。这是我使用的教程： https://devdactic.com/ionic-firebase-angularfire/

Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' Error: 
InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' at invalidPipeArgumentError 
(http://localhost:8100/build/vendor.js:44334:12) at AsyncPipe._selectStrategy 
(http://localhost:8100/build/vendor.js:44479:15) at AsyncPipe._subscribe 
(http://localhost:8100/build/vendor.js:44465:31) at AsyncPipe.transform 
(http://localhost:8100/build/vendor.js:44443:22) at Object.eval [as updateDirectives]         
(ng:///AppModule/HomePage.ngfactory.js:136:73) at Object.debugUpdateDirectives [as 
updateDirectives] (http://localhost:8100/build/vendor.js:13450:21) at checkAndUpdateView 
(http://localhost:8100/build/vendor.js:12627:14) at callViewAction 
(http://localhost:8100/build/vendor.js:12995:21) at execComponentViewsAction 
(http://localhost:8100/build/vendor.js:12927:13) at checkAndUpdateView 
(http://localhost:8100/build/vendor.js:12633:5)

home.ts:

import { FirebaseProvider } from './../../providers/firebase/firebase';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FirebaseListObservable } from 'angularfire2/database';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
  shoppingItems: FirebaseListObservable<any[]>;
  newItem = ''; 

  constructor(public navCtrl: NavController, public firebaseProvider: 
  FirebaseProvider) {
    this.shoppingItems = this.firebaseProvider.getShoppingItems();
  }
  addItem() {
    this.firebaseProvider.addItem(this.newItem);
  }
  removeItem(id) {
    this.firebaseProvider.removeItem(id);
  }
}

这是我的html：

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Shopping List
    </ion-title>
   </ion-navbar>
</ion-header> 
<ion-content>
  <ion-row>
    <ion-col col-9>
      <ion-item>
         <ion-input type="text" [(ngModel)]="newItem" placeholder="New 
          Shopping item"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col>
      <button ion-button (click)="addItem()">Add!</button>
    </ion-col>
  </ion-row>

  <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>
</ion-content>

这是我的 firebase.ts：

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 
'angularfire2/database'; 

@Injectable()
export class FirebaseProvider {
  constructor(public afd: AngularFireDatabase) { }

  getShoppingItems() {
   return this.afd.list('/shoppingItems/');
  }

  addItem(name) {
   this.afd.list('/shoppingItems/').push(name);
  }

  removeItem(id) {
    this.afd.list('/shoppingItems/').remove(id);
  }

}

Answer 1

从

中删除| async

<ion-item-sliding *ngFor="let item of shoppingItems | async">

这样使用

<ion-item-sliding *ngFor="let item of shoppingItems ">