在AngularFire2中獲取FirebaseListObservable

Question

我將我的應用程序連接到使用AngularFire2包的Firebase。我知道這是勾搭上了，因爲當我做了一個組件如下：

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

的項目推到火力地堡正確的名單。所以連接就在那裏。但是，當嘗試循環並在模板中顯示它們時，this.items爲空。還需要做什麼才能顯示這些項目？

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

編輯

下面是實際的代碼要點的鏈接，但它確實幾乎完全一樣的東西在這裏這個問題。

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 

希望這有助於！