title: AngularFire2 returning [object Object]
body: <p>I am trying to figure out where everything's gone wrong. All my observables return [object Object]. </p>
  
  <p>My <strong>sunshine.component.html</strong></p>
  
  <pre><code>&lt;h4&gt;Welcome {{username$}}&lt;/h4&gt;
  &lt;ul&gt;
  &lt;li *ngFor="let addsnote of addsnotes$ | async"&gt;{{ addsnote }}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My <strong>sunshine.component.ts</strong></p>
  
  <pre><code>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&lt;string[]&gt;;
    private username$: FirebaseObjectObservable&lt;string&gt;;
    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');}
  
  }
  </code></pre>
  
  <p>Portions of my Firebase <strong>database</strong></p>
  
  <pre><code>{
    "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"
      }
    }
  }
  </code></pre>
  
  <p>A screenshot of <strong>my page</strong> (for the sake of clarity)</p>
  
  <p><a href="https://i.stack.imgur.com/quCoP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/quCoP.jpg" alt="enter image description here"></a></p>
  
  <p><strong>EDIT</strong> I have included a repo of my ongoing project here, so as to provide you all with as much info as possible. Hopefully it's useful. </p>
  
  <p><a href="https://github.com/emjayweb/demo" rel="nofollow noreferrer">https://github.com/emjayweb/demo</a></p>
  
  <p>The respective files are in <strong>src/app/profile/profile.component</strong>. As this is completely WIP, please don't fuss about the logistics of it (guard routing, validation, etc). </p>
  
  <p>The way this works is you enter some dummy data on the home page Create Account, then click on the Profile link on the navigation. You will probably have to refresh the page first. When you click on the button in the Profile route, you enter 'Billy Dee Williams' to your <code>addnote</code> array, and the view should reflect that. </p>