@kgaspar Thanks for your detailed explanation.I appreciate that.I changed the code as you said and it seems to be not working here in my case.Following is the updated version.
event-detail.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {EventService} from '../../providers/event-service';
/**
* Generated class for the EventDetail page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-event-detail',
templateUrl: 'event-detail.html',
providers: [EventService]
})
export class EventDetailPage {
public eventId: any;
public event: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public eventService: EventService) {
this.eventId = navParams.get('eventId');
this.eventService.loadEventDetail(this.eventId)
.subscribe(data => {
this.event = data;
});
}
}
event-service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
/*
Generated class for the EventService provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class EventService {
public data: any;
constructor(public http: Http) {
console.log('Hello EventService Provider');
}
loadEvents() {
if (this.data) {
// already loaded data
return Promise.resolve(this.data);
}
// don't have the data yet
return new Promise(resolve => {
// We're using Angular HTTP provider to request the data,
// then on the response, it'll map the JSON data to a parsed JS object.
// Next, we process the data and resolve the promise with the new data.
this.http.get('/api/events')
.map(res => res.json())
.subscribe(data => {
// we've got back the raw data, now generate the core schedule data
// and save the data for later reference
this.data = data;
resolve(this.data);
});
});
}
loadEventDetail(eventId){
return this.http.get('/api' + '/events/' + eventId ) .map(res => res.json());
}
}
View
<ion-header>
<ion-navbar color="danger">
<ion-title>Event Details</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>{{ event.title }}</p>
</ion-content>