angular – Ionic和Firebase – InvalidPipeArgument：管道’Asy

发布时间：2020-12-17 07:51:07 所属栏目：安全来源：网络整理

导读：我在使用Ionic 3和Firebase工作时遇到基本的CRUD待办事项列表应用程序时遇到问题. 我坚持的错误信息是：未捕获(在承诺中)：错误：InvalidPipeArgument：管道’AsyncPipe’的'[object Object]’ 当我添加 ion-item * ngFor =“let item of shoppingListRef $

我在使用Ionic 3和Firebase工作时遇到基本的CRUD待办事项列表应用程序时遇到问题.

我坚持的错误信息是：

未捕获(在承诺中)：错误：InvalidPipeArgument：管道’AsyncPipe’的'[object Object]’

当我添加< ion-item * ngFor =“let item of shoppingListRef $| async”>时,错误消息开始了. section to shopping-list.html：

购物-list.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Shopping List</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="navigateToAddShoppingPage()">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let item of shoppingListRef$| async">
      <h2>Item Name: {{item.itemName}}</h2>
      <h3>Amount: {{item.itemNumber}}</h3>
    </ion-item>
  </ion-list>
</ion-content>

我已经尝试在< ion-item>之间注释掉代码了.和< / ion-item>在上面的文件中,并删除错误消息.但是,无法弄清楚如何解决它.

以下是一些相关文件.

购物,list.ts

import { Component } from '@angular/core';
import { IonicPage,NavController,NavParams } from 'ionic-angular';

import { AngularFireDatabase,FirebaseListObservable } from 'angularfire2/database';

import { AddShoppingPage } from '../add-shopping/add-shopping';
import { ShoppingItem } from '../../models/shopping-item/shopping-item.interface';

@Component({
  selector: 'page-shopping-list',templateUrl: 'shopping-list.html',})
export class ShoppingListPage {

  shoppingListRef$: FirebaseListObservable<ShoppingItem[]>

  constructor(public navCtrl: NavController,public navParams: NavParams,private database: AngularFireDatabase) {
    this.shoppingListRef$= this.database.list('shopping-list');
  }

  navigateToAddShoppingPage() {
    this.navCtrl.push(AddShoppingPage)
  }
}

购物,item.interface.ts

export interface ShoppingItem {
    itemName: string;
    itemNumber: number;
}

在此先感谢您的任何想法/帮助！

我认为您正在使用新版本的angularfire2版本,在这种情况下,您应该执行以下操作：

import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-shopping-list',})
export class ShoppingListPage {
 shoppingListRef$: Observable<any[]>;
  constructor(database: AngularFireDatabase) {
    this.shoppingListRef$= this.database.list('shopping-list').valueChanges();;
  }
}

从版本5开始,database.list不再返回observable,因此您无法使用异步管道在模板中订阅它.这就是为什么你应该链接valueChanges()方法,在这种情况下返回一个Observable.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!