Question

我正在使用google firebase，但是当我想要来自firebase的async数据时，我会显示此错误。

shop.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>

shop.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');
  }

}

更新代码：

火力-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

您只能在一个observable上使用| async管道，删除管道

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

未捕获（承诺）：错误：InvalidPipeArgument：管道'AsyncPipe'的'[object Object]'

1 个答案: