AngularFire2返回[对象对象]

Question

我想弄清楚一切都出了问题。我所有的观察对象都返回[object Object]。

我sunshine.component.html

<h4>Welcome {{username$}}</h4> 
<ul> 
<li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote }}</li> 
</ul> 

我sunshine.component.ts

import { Component, OnInit, Injectable } from '@angular/core'; 
import { FormGroup, FormControl } from '@angular/forms'; 
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2'; 

export class ProfileComponent implements OnInit { 
    private addsnotes$: FirebaseListObservable<string[]>; 
    private username$: FirebaseObjectObservable<string>; 
    private profileshow = false; 
    addForm: FormGroup; 

    constructor(private af: AngularFire){ 
    this.addForm = new FormGroup({ 
     'addnote': new FormControl() 
    }); 
    } 

    ngOnInit(){ 
    let user = firebase.auth().currentUser, 
    userNamePath = `users/${user.uid}/username`, 
    notesPath = `users/${user.uid}/addnote`; 
    this.username$ = this.af.database.object(userNamePath); 
    this.addsnotes$ = this.af.database.list(notesPath); 
    } 

    addSubmit(){this.addsnotes$.push('Billy Dee Williams');} 

} 

我的火力地堡数据库的某些部分

{ 
    "users" : { 
    "4twiyaFxVmaESXGWIfW4BwRXh893" : { 
     "addnote" : { 
     "-KSmWtpUSFXPCL4O3aKr" : "Do the dishes" 
     }, 
     "useremail" : "majic@johnson.com", 
     "username" : "majic" 
    }, 
    "PYuSE6zyAENdKREZGTHm5VH1DXn1" : { 
     "addnote" : { 
     "-KSoZM7sH6X5ahMq7S5y" : "Du the dishes", 
     "-KSoZMimZzm6ZGQowmuL" : "Du the dishes", 
     "-KSouEXkc1UkyISGTCHd" : "Du the dishes" 
     }, 
     "useremail" : "majohjn@asd.com", 
     "username" : "asdasd" 
    } 
    } 
} 

我的网页的屏幕截图（为清楚起见）

编辑我已经包括了我正在进行的项目的回购这里，从而为您提供一切尽可能多的信息作为可能。希望它是有用的。

https://github.com/emjayweb/demo

各文件在SRC /应用/简档/ profile.component。由于这完全是WIP，请不要为它的后勤问题感到担忧（警卫路由，验证等）。

这种方式的作用是在主页上输入一些虚拟数据创建账户，然后点击导航上的配置文件链接。您可能必须先刷新页面。当您点击配置文件路线中的按钮时，您输入'Billy Dee Williams'到您的addnote阵列，并且视图应该反映这一点。

Answer 1

得到了答案from a different question。我必须做的是将$.value标签添加到我的HTML。在我的名单观察到的情况下，这本来是：

<li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote.$value }}</li> 

而且我观察到的对象，这本来是：

<h4>Welcome {{ (username$ | async)?.$value }}</h4> 

Answer 2

在下面的代码中，'addsnote'是一个对象数组。

<li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote }}</li> 

只需检查下面的代码。

<li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote[0] }}</li> 

然后您就可以了解如何访问数据。