在 AngularFire2 中获取 FirebaseListObservable

【问题标题】：Getting FirebaseListObservable in AngularFire2在 AngularFire2 中获取 FirebaseListObservable
【发布时间】：2017-08-11 23:41:00
【问题描述】：

我使用 AngularFire2 包将我的应用连接到 Firebase。我知道它已连接，因为当我在组件中执行以下操作时：

constructor(af: AngularFire) {
    this.items = af.database.list('/items');
    this.items.push({ attr: 'value' });
}

该项目被推送到 Firebase 中的正确列表。所以连接就在那里。但是，当尝试循环并在模板中显示它们时，this.items 为空。还需要做什么才能显示这些项目？

<div *ngFor="let item of items | async">{{ item.attr }}</div>

编辑

这里是一个带有实际代码的要点的链接，尽管它实际上几乎与此问题中的内容完全相同。

https://gist.github.com/pjlamb12/0c3c680e3481c222f9b253224c7dd439

【问题讨论】：

标签： angular firebase angularfire2

【解决方案1】：

您需要订阅该列表，因此您需要执行以下操作：

所以，如果您的数据库中有这样的项目列表：

-items
   -item1
      -name: 'mycoolitem'
   -item2
      -name: 'mycoolitem2'

然后在你的 TS 文件中：

//Items would have to be a list observable
items: FirebaseListObservable<any>;
//create an array for the returned items
itemsReturned: Array<any>;

constructor(af: AngularFire) {
    this.items = af.database.list('/items');
    this.items.subscribe((res) => {
      this.itemsReturned = res;
    });
}

然后在你的 HTML 中：

<div *ngFor="let item of itemsReturned | async">{{ item.name }}</div>

这将返回：

mycoolitem
mycoolitem2

希望这会有所帮助！

【讨论】：