Angular 无效参数：'；[对象对象]'；对于管道'；异步管道&x27；

我知道有人问过同样的问题： 但是按照这个建议并不能解决我的问题

我正在尝试从Firebase数据库中获取一个列表，并在ionic中显示它

我已经能够从数据库中获取数据（通过

控制台.log

），但是，无法在应用程序中显示它。（问题可能更多地出现在*ngFor或HTML部分）

以下是我的项目中的package.json：

{
  "name": "brianAppResto",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "^5.1.3",
    "@angular/common": "^5.1.3",
    "@angular/compiler": "^5.1.3",
    "@angular/compiler-cli": "^5.1.3",
    "@angular/core": "^5.1.3",
    "@angular/fire": "^5.0.2",
    "@angular/forms": "^5.1.3",
    "@angular/http": "^5.1.3",
    "@angular/platform-browser": "^5.1.3",
    "@angular/platform-browser-dynamic": "^5.1.3",
    "@angular/platform-server": "^5.1.3",
    "@angular/router": "^5.1.3",
    "@ionic-native/core": "~4.15.0",
    "@ionic-native/splash-screen": "~4.15.0",
    "@ionic-native/status-bar": "~4.15.0",
    "@ionic/pro": "2.0.3",
    "@ionic/storage": "2.2.0",
    "firebase": "^5.5.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "promise-polyfill": "^8.1.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

这是我的菜单。ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { AddMenuPage } from '../add-menu/add-menu';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Menu } from './../../models/menu';

/**
 * Generated class for the MenuPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class MenuPage {

  menuData: AngularFireList<Menu[]>;

  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase,
    private toast: ToastController,
    public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.toast.create({
          message: `Menu berhasil ditambahkan, ${data.email}`,
          duration: 3000
        }).present();

        this.menuData = this.afDatabase.list<Menu>(`menu/${data.uid}`).valueChanges().subscribe(console.log);

      }
      else {
        this.toast.create({
          message: `Could not find authentication details`,
          duration: 3000
        }).present();
      }
    });
  }

  addMenu() {
    this.navCtrl.push('AddMenuPage');
  }
}

从'@angular/core'导入{Component}；
从“ionic angular”导入{IonicPage，NavController，NavParams，ToastController}；
从“../add menu/add menu”导入{AddMenuPage}；
从'@angular/fire/auth'导入{AngularFireAuth}；
从'@angular/fire/database'导入{AngularFireDatabase，AngularFireList}；
从“/../../models/Menu”导入{Menu}；
/**
*为菜单页生成的类。
*
*看https://ionicframework.com/docs/components/#navigation 有关
*爱奥尼亚网页和导航。
*/
@IonicPage（）
@组成部分({
选择器：“页面菜单”，
templateUrl:'menu.html'，
})
出口类菜单页{
menuData：角火种；
构造函数（专用afAuth:AngularFireAuth，专用afDatabase:AngularFireDatabase，
私人吐司：吐司控制器，
公共navCtrl:NavController，公共navParams:navParams）{
}
ionViewDidLoad（）{
this.afAuth.authState.subscribe（数据=>{
if（data&&data.email&&data.uid）{
这是toast.create({
消息：`Menu berhasil DITABAHKAN，${data.email}`，
持续时间：3000
}).present（）；
this.menuData=this.afDatabase.list（`menu/${data.uid}`）.valueChanges（）.subscribe（console.log）；
}
否则{
这是toast.create({
消息：`找不到身份验证详细信息'，
持续时间：3000
}).present（）；
}
});
}
addMenu（）{
this.navCtrl.push（'AddMenuPage'）；
}
}

这是我的菜单.html

<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Menu</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <button ion-button (click)="addMenu()">Tambah Menu</button>

  <ion-list>
    <ion-item *ngFor="let data of menuData | async">
      <h2>Nama Menu: {{data.menuName}}</h2>
      <h3>Harga: {{data.menuPrice}}</h3>
    </ion-item>
  </ion-list>

</ion-content>

菜单
坦巴菜单
Nama菜单：{{data.menuName}
哈格：{{data.menuPrice}

我还是个新手，如果这个问题有一个明确的答案，我很抱歉

---

非常感谢您的帮助。

因为您存储了

数组，所以不需要使用async<代码>异步

用于尝试通过

可观察

获取值

  <ion-list>
    <ion-item *ngFor="let data of menuData"> <!-- async is removed -->
      <h2>Nama Menu: {{data.menuName}}</h2>
      <h3>Harga: {{data.menuPrice}}</h3>
    </ion-item>
  </ion-list>

Nama菜单：{{data.menuName}
哈格：{{data.menuPrice}

如果要保持异步，请更改以下行

this.menuData = this.afDatabase.list<Menu>(`menu/${data.uid}`).valueChanges().subscribe(console.log);

this.menuData=this.afDatabase.list（`menu/${data.uid}'）.valueChanges（）.subscribe（console.log）；

到

this.menuData=this.afDatabase.list（`menu/${data.uid}`）.valueChanges（）；

一旦收到数据，就需要使用JSON.parse（）或| JSON解析数据

在您的情况下，它可能类似于：-

this.menuData = JSON.parse(this.afDatabase.list<Menu>(`menu/${data.uid}`).valueChanges());

this.menuData=JSON.parse（this.afDatabase.list（`menu/${data.uid}`）.valueChanges（））；

（或）

在html中

<ion-item *ngFor="let data of menuData | async">
      <h2> {{data | json }}</h2>
</ion-item>

{{data}json}

async pipe在您正在传输的值是承诺值或可观察值时起作用。menuData属于AngularFireList类型。如果menuData是一个Promise或可观察的序列，可以用AngularFireList解析，那么异步管道就可以工作到<代码>菜单数据$：角度火灾列表。我还将所有

menuData

更改为

menuData$

。错误消息仍然完全相同。谢谢你的回复。我已经删除了

async

。这就是我得到的：

找不到类型为“object”的不同支持对象“[object object]”。NgFor仅支持绑定到阵列等可重用项。

这与angularfire/angularfire的版本/依赖项有关吗？因为您没有指定正确的值。您正在打印控制台。无论如何，我已经更新了我的答案。只需保持

async

并更改我在回答中提到的行。我已删除

.valueChanges（）.subscribe（console.log）

，但仍然会出现错误

找不到不同的支持对象…

。任何其他可能的原因？请尝试使用

this.menuData=this.afDatabase.list（

menu/${data.uid}

）.valueChanges（）

你就是那个人！非常感谢！它解决了问题！：）：：）我已更新了你的帖子。两者仍然会产生相同的错误消息：

InvalidPipeArgument:'[object]'对于管道'Asyncpipe'

您需要删除异步管道

<ion-item *ngFor="let data of menuData | async">
      <h2> {{data | json }}</h2>
</ion-item>