FirebaseListObservable in AngularFire2

Question

我有我的应用程序连接到Firebase使用AngularFire2包。我知道它是连接在一起的，因为当我在组件中执行以下操作时：

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>

编辑

这里有一个包含实际代码的gist链接，尽管它实际上与这个问题中的内容几乎完全一样。

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

Answer 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

希望这能有所帮助！