AngularFire2 返回 [object Object]答案

【问题标题】：AngularFire2 returning [object Object]AngularFire2 返回 [object Object]
【发布时间】：2016-09-29 08:22:18
【问题描述】：

我正试图找出哪里出了问题。我所有的 observables 都返回 [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，请不要对它的后勤工作大惊小怪（保护路由、验证等）。

这种工作方式是您在主页创建帐户上输入一些虚拟数据，然后单击导航上的个人资料链接。您可能必须先刷新页面。当您单击 Profile 路径中的按钮时，您将“Billy Dee Williams”输入到您的 addnote 数组中，并且视图应该会反映这一点。

【问题讨论】：

您还需要在标题中添加| async，因为 FirebaseObjectObservable 也是需要解包的异步 observable：<h4>Welcome {{username$ | async}}</h4>。我们正在研究一些方法，以通过指令简化此操作。
感谢您的信息。我想知道如何格式化与对象的异步。不幸的是，这仍然不能解决我的[object Object] 问题。我仍然对为什么会发生这种情况感到困惑。
然后尝试将其通过管道传输到 json 中，看看你有什么。 {{ 用户名 |异步 | json}}
其实我已经知道了。答案如下。但是直到明天我才能检查自己的答案。谢谢！

标签： angular typescript firebase firebase-realtime-database angularfire

【解决方案1】：

得到答案from a different question。我要做的就是在我的 HTML 中添加$.value 标签。就我的可观察列表而言，应该是：

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

对于我的 observable 对象，它应该是：

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

【讨论】：

以上代码在 angular 4 中也可以使用最新版本的 angularfire2

【解决方案2】：

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

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

只需检查以下代码。

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

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

【讨论】：

有关其他信息，我使用您的代码得到的空项目符号点与我在数据库中的项目数量正确对应。所以li 正在打印出来。但是，li 是空的。添加或删除相应的列表项会更改我的代码中的空 li 标记的数量。