gpt4 book ai didi

angular - InvalidPipeArgument :'[object Object]' 用于管道 Asyncpipe'

转载 作者:行者123 更新时间:2023-12-02 03:27:33 25 4
gpt4 key购买 nike

我知道有人问过这个完全相同的问题: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' / angularfire2 [duplicate]但是听从建议并不能解决我的问题。

我正在尝试从 Firebase 数据库中获取列表并将其显示在 ionic 中。

我已经能够从数据库中获取数据(通过console.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"
}

这是我的menu.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');
}
}

这是我的menu.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>

如果这个问题有明显的答案,我对 ionic/angular 还是个新手。

非常感谢您的帮助。

最佳答案

因为您存储了数组,所以您不需要使用异步。当您尝试通过 Observable 获取值时,使用 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>

如果你想保持异步,那么改变下面这行

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

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

关于angular - InvalidPipeArgument :'[object Object]' 用于管道 Asyncpipe',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52784948/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com