我想使用angularfire2 5.0.0-rc.2显示从Firebase到Ionic视图的对象列表。
这是我的Firebase对象列表
这是该服务的方法,用于检索与餐馆相关的所有数据
getRestaurants() {
this.restaurants = this.af.list('/Restaurants')
return this.restaurants;
}
这是我接受服务数据的组件
export class RestaurantsPage {
restaurants: Observable<any[]>;
constructor(public navCtrl: NavController, public af: AngularFireDatabase, public dataservice: handleDataService) {
this.dataservice.getUserEmail().subscribe(res => {
this.restaurants = this.dataservice.getRestaurants().valueChanges();
})
// this.items.subscribe(res => console.log(res[0].$key));
}
这是我要显示数据的HTML页面
<ion-content class="card-background-page">
<ion-list>
<ion-item *ngFor="let restaurant of restaurants | async">
<ion-thumbnail item-start>
<img src="img/thumbnail-totoro.png">
</ion-thumbnail>
<h2>{{restaurant.Name}}</h2>
<h3>{{restaurant.Description}}</h3>
<button ion-button clear item-end (click)="gotoPage(restaurant)">View</button>
</ion-item>
</ion-list>
</ion-content>
我知道在服务方法中我什么也没做,只是返回了从Firebase API获得的值。我想要知道如何迭代 s @ g,com 中的键,并将我的HTML页面中每个键内的数据显示为列表。我也尝试使用map运算符,但我在angularfire2 5.0.0-rc.2中找不到更好的解决方案。
答案 0 :(得分:2)
我发现这些链接对任何遇到相同问题的人都有帮助
将FirebaseListObservable更新为AngularFireList https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md
将数据检索为列表
https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md
这就是我做的方式
这是我的服务
getRestaurants() {
let restaurants = this.af.list('/Restaurants');
return restaurants;
}
getResturantsFromKeys(key){
let rest = this.af.list('/Restaurants/'+ key);
return rest;
}
这是我的组件
restaurants: any[] = [];
allRestaurants: Observable<any[]>
constructor(public navCtrl: NavController, public af: AngularFireDatabase, public dataservice: handleDataService) {
this.dataservice.getUserEmail().subscribe(res => {
this.dataservice.getRestaurants().snapshotChanges().subscribe(actions => {
actions.forEach(action => {
// console.log(action.payload.val());
this.allRestaurants = this.dataservice.getResturantsFromKeys(action.key).valueChanges();
this.allRestaurants.subscribe(res => {
res.forEach(element => {
this.restaurants.push(element);
});
});
});
});
});
}
HTML文件看起来像这样
<ion-item *ngFor="let restaurant of restaurants">
<h2>{{restaurant.Name}}</h2>
<h3>{{restaurant.Description}}</h3>
<button ion-button clear item-end (click)="gotoPage(restaurant)">View</button>
</ion-item>
可能会有一个比这个更好更简单的答案。但这就是我解决问题的方法。