未捕获(承诺中)：错误：无效管道参数：管道'AsyncPipe' '[object Object]'

Question

我正在使用谷歌火力基地，但是当我想从火力基地async数据时，我会看到这个错误。

商店.html

<ion-header>
    <ion-navbar color="danger">
        <ion-title>商城</ion-title>
  </ion-navbar>
</ion-header>
<ion-content class="common-bg">
    <!-- slider on top-->
    <ion-slides pager autoplay="2000">
      <ion-slide *ngFor="let slide of slides">
        <img src="{{ slide.src }}" alt="">
      </ion-slide>
    </ion-slides>
    <h4 text-center>这里是商品</h4>
    <!--List of items-->
    <ion-grid class="list-cards">
      <ion-row>
        <ion-col col-6 class="product" (click)="viewItem(item.id)">
          <div class="card light-bg">
            <img src="assets/img/logo2.jpg" alt="">
            <div class="price" text-center>RM100</div>
            <!-- <div class="price" text-center>{{ item.price | currency:'USD':true }}</div> -->
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-list>
      <ion-item-group *ngFor="let contact of contactsList | async">
        <ion-item>
          {{contact.$value}}
        </ion-item>
      </ion-item-group>
    </ion-list>
    <ion-list>
      <ion-row> 
        <ion-col col-6>
          <ion-input type="text" [(ngModel)]="Contact" placeholder="添加评论"></ion-input>
        </ion-col>
        <ion-col>
          <button ion-button color="danger" (click)="addContact()">评论</button>
        </ion-col>
      </ion-row>
    </ion-list>
  </ion-content>

商店.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { FirebaseServiceProvider } from '../../providers/firebase-service/firebase-service';
import { ActionSheetController } from 'ionic-angular';
import { AngularFireList } from 'angularfire2/database';
@Component({
  selector: 'page-shop',
  templateUrl: 'shop.html',
})
export class ShopPage {
  contactsList:AngularFireList<any>;
  Contact = '';
  constructor(public navCtrl: NavController, public navParams: NavParams,
    public actionctrl:ActionSheetController,
    public firebaseService:FirebaseServiceProvider) {
      this.contactsList = this.firebaseService.getContactsList();
  }
  addContact() {
    this.firebaseService.addContact(this.Contact);
  }
  public slides = [
    {
      src: 'assets/img/slide_1.jpg'
    },
    {
      src: 'assets/img/slide_3.jpg'
    }
  ];
  ionViewDidLoad() {
    console.log('ionViewDidLoad ShopPage');
  }
}

更新代码：

Firebase-service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class FirebaseServiceProvider {
  constructor(public http: HttpClient,public angularfiredb: AngularFireDatabase) {
    console.log('Hello FirebaseServiceProvider Provider');
  }
  getContactsList() {
    return this.angularfiredb.list('/contactsList/');
  }
  addContact(name) {
    this.angularfiredb.list('/contactsList').push(name);
  }
}

Answer 1

只能在可观察对象上使用 |异步管道，删除管道

<ion-item-group *ngFor="let contact of contactsList">

编辑

将服务内的方法更改为

getContactsList() {
    return this.angularfiredb.list('contactsList').valueChanges();
  }

和组件作为

this.contactsList = this.firebaseService.getContactsList().subscribe(contacts=> {
      this.contactsList = contacts;
});