我的Ionic项目旨在接受学习课程的课程,位置和时间,将其添加到数据库中,然后将其作为学习课程显示在屏幕上,供所有用户查看。有点像游戏中的LFG。我以类似的前提观看了一段视频,可以推送所需的所有会话数据,但是他显示这些数据的方法以及我发现的所有其他方法似乎都行不通。我还收到错误Object(...)不是函数,也不知道它指的是什么。
Contact.html:
<ion-header>
<ion-navbar color ="primary">
<ion-row>
<ion-col>
</ion-col>
<ion-title>
Study Sessions
</ion-title>
<ion-col>
<ion-icon name="add-circle" class="two" navPush="AddSessionPage"></ion-icon>
</ion-col>
</ion-row>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Sessions:
</ion-list-header>
<ion-item
*ngFor="let session of sessionsList$ | async"
detail-push navPush="ContactPage" [navParams]="{session:session}">
{{session.class}}
</ion-item>
</ion-list>
<button ion-button (click)="showAllSessions()">Show All Sessions</button>
<ion-list>
</ion-list>
</ion-content>
Contact.ts:
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Session } from '../../models/session.model';
import { SessionsService } from '../../services/sessions.service'
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {
sessionsList$: Observable<Session[]>;
session: Session ={
class : '',
location: '',
time: ''
};
constructor(public navCtrl: NavController, public navParams: NavParams, private sessionsService: SessionsService,
private alertCtrl: AlertController) {
this.sessionsList$ = this.sessionsService.getSessionsList().snapshotChanges().map(changes => {
return changes.map (c => ({
key: c.payload.key, ...c.payload.val()
}));
});
}
ionViewWillLoad(){
this.sessionsList$ = this.sessionsService.getSessionsList().snapshotChanges().map(changes =>{
return changes.map (c => ({
key: c.payload.key, ...c.payload.val()
}));
});
}
showAllSessions(){
this.sessionsList$ = this.sessionsService.getSessionsList().snapshotChanges().map(changes =>{
return changes.map (c => ({
key: c.payload.key, ...c.payload.val()
}));
});
}
}