AngularFire2 返回 [object Object]

Question

我正在努力找出哪里出了问题。我所有的 observables return [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中。由于这完全是 WIP，请不要为它的后勤工作（守卫路由、验证等）大惊小怪。

其工作方式是您在创建帐户主页上输入一些虚拟数据，然后单击导航中的个人资料 link。您可能需要先刷新页面。当您单击 Profile 路由中的按钮时，您将 'Billy Dee Williams' 输入到 addnote 数组，视图应反映该内容。

Answer 1

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

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

只需检查下面的代码。

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

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

Answer 2

得到答案。我必须做的是将 $.value 标签添加到我的 HTML。对于我的可观察列表，它应该是：

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

对于我的可观察对象，它应该是：

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

AngularFire2 返回 [object Object]

AngularFire2 returning [object Object]

firebase

typescript

angularfire

firebase-realtime-database

angular