AngularFire2返回[object Object]

Question

我想知道一切都出错了。我的所有observable都返回[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"
    }
  }
}

我的页面的屏幕截图（为了清晰起见）

编辑我在这里收录了我正在进行的项目的回购，以便为您提供尽可能多的信息。希望它有用。

https://github.com/emjayweb/demo

相应的文件位于 src / app / profile / profile.component 中。由于这完全是在制品，请不要大惊小怪它的后勤（保护路由，验证等）。

这种方式的工作方式是在主页“创建帐户”中输入一些虚拟数据，然后单击导航上的“配置文件”链接。您可能必须先刷新页面。当您点击个人资料路线中的按钮时，您输入比利迪威廉姆斯＆＃39;到你的addnote数组，视图应该反映出来。

Answer 1

得到答案from a different question。我要做的是在我的HTML中添加$.value标签。在我的列表可观察的情况下，它将是：

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

对于我的物体可观察，它本来是：

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

Answer 2

在下面的代码＆＃39; addsnote＆＃39;是一个对象数组。

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

请检查以下代码。

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

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