- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我知道有人问过这个完全相同的问题: 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/
我遵循了一本名为“Sitepoint Full Stack Javascript with MEAN”的书中的教程,我刚刚完成了第 6 章,应该已经创建了一个带有“数据库”的“服务器”。数据库只不过是
在 Jquery 中,我创建两个数组,一个嵌入另一个数组,就像这样...... arrayOne = [{name:'a',value:1}, {name:'b',value:2}] var arra
这个问题在这里已经有了答案: What is the explanation for these bizarre JavaScript behaviours mentioned in the 'Wa
我被放在别人的代码上,有一个类用作其他组件的基础。当我尝试 ng serve --aot(或 build --prod)时,我得到以下信息。 @Component({ ...,
我正在测试一些代码,并使用数据创建了一个 json 文件。 问题是我在警报中收到“[object Object],[object Object]”。没有数据。 我做错了什么? 这是代码:
我想打印 [object Object],[object Object] 以明智地 "[[{ 'x': '1', 'y': '0' }, { 'x': '2', 'y': '1' }]]"; 在 ja
我有一个功能 View ,我正在尝试以特殊格式的方式输出。但我无法让列表功能正常工作。 我得到的唯一返回是[object Object][object Object] [object Object]
在使用优秀的 Sim.js 和 Three.js 库处理 WebGL 项目时,我偶然发现了下一个问题: 一路走来,它使用了 THREE.Ray 的下一个构造函数: var ray = new THRE
我正在使用 Material UI 进行多重选择。这是我的代码。 {listStates.map(col => (
我的代码使用ajax: $("#keyword").keyup(function() { var keyword = $("#keyword").val(); if (keyword.
我遇到了下一个错误,无法理解如何解决它。 Can't resolve all parameters for AuthenticationService: ([object Object], ?, [o
我正在尝试创建一个显示动态复选框的表单,至少应选中其中一个才能继续。我还需要获取一组选中的复选框。 这是组件的代码: import { Component, OnInit } from '@angul
我正在开发 NodeJs 应用程序,它是博客应用程序。我使用了快速验证器,我尝试在 UI 端使用快速闪存消息将帖子保存在数据库中之前使用闪存消息验证数据,我成功地将数据保存在数据库中,但在提交表单后消
我知道有些人问了同样的问题并得到了解答。我已经查看了所有这些,但仍然无法解决我的问题。我有一个 jquery snipet,它将值发送到处理程序,处理程序处理来自 JS 的值并将数据作为 JSON 数
我继承了一个非常草率的项目,我的任务是解释为什么它不好。我注意到他们在整个代码中都进行了这样的比较 (IQueryable).FirstOrDefault(x => x.Facility == fac
我只是在删除数组中的对象时偶然发现了这一点。 代码如下: friends = []; friends.push( { a: 'Nexus', b: 'Muffi
这两个代码片段有什么区别: object = nil; [object release] 对比 [object release]; object = nil; 哪个是最佳实践? 最佳答案 object
我应该为其他人将从中继承的第一个父对象传递哪个参数,哪个参数更有效 Object.create(Object.prototype) Object.create(Object) Object.creat
我在不同的对象上安排不同的选择器 [self performSelector:@selector(doSmth) withObject:objectA afterDelay:1]; [self per
NSLog(@"%p", &object); 和 NSLog(@"%p", object); 有什么区别? 两者似乎都打印出一个内存地址,但我不确定哪个是对象的实际内存地址。 最佳答案 这就是我喜欢的
我是一名优秀的程序员,十分优秀!