AngularFire2 return [object Object]

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');} 

} 

Порции моей базе данных Firebase

{ 
    "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" 
    } 
    } 
} 

Скриншот моей страницы (для ясности)

EDIT Я включил репо моего текущего проекта здесь, чтобы предоставить вам все с таким большим количеством информации, как возможное. Надеюсь, это полезно.

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

В приведенном ниже коде 'addnote' представлен массив объектов.

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

Просто проверьте приведенный ниже код.

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

Тогда вы можете понять, как получить доступ к данным.