My video service:
public getExercise(exerciseId): Observable<Exercise[]>{
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers, withCredentials: true });
return this.http.get(this.base_url + exerciseId + '/', options)
.map(this.extractData)
.catch(this.handleError);
}
In my template I have:
<!-- Show current level -->
<div align="center">
<h6>Ihre aktuelle Intensitätsstufe ist {{intensity_level}}</h6>
</div>
<div *ngIf="showVideo" align="center" class="video-container">
<iframe [src]="exercise_video_url | safe" frameborder="0" allowfullscreen></iframe>
</div>
And my component:
export class VideoPage implements OnInit {
exercise: Exercise[];
errorMessage: string;
public exercise_id: number;
public intensity_level: number;
public rating: number;
public exercise_video_url: string;
public current_date: string;
constructor(public navCtrl: NavController, public navParams: NavParams, public videoService: VideoService) {
console.log(this.navParams.get('exerciseId'));
this.exercise_video_url='';
this.exercise_id=this.navParams.get('exerciseId');
}
ngOnInit(){
this.getExercise()
}
getExercise(){
this.videoService.getExercise(this.exercise_id)
.subscribe(
exercise => {
this.exercise = exercise;
console.log(this.exercise[0].video_url)
},
error => {
this.errorMessage = <any>error;
});
this.exercise_video_url=this.exercise[0].video_url;
}
}
However, the object properties are not being assigned to my local variables so that I can bind them on template. My service simply returns one object that's why I used this.exercise[0] and if I try to write the same line outside get(), it gives compilation error (which seems obvious). What should be done here?
The console line prints the url.