How can one call a function on a Typescript model object in an Ionic HTML template? When I attempt this, it results in the error self.context.$implicit.myFunctionName is not a function
.
I want to display photos from the Flickr API in my Ionic2 app. To build the URL to a Flickr photo, one must concatenate several data fields that are provided in the API response and append a suffix indicating the desired photo resolution. This is done in the getUrl
function in the Photo
model.
src/models/photo.ts
export class Photo {
id: string;
owner: string;
secret: string;
server: string;
farm: number;
title: string;
url: string;
// Get the URL to the photo at the size specified by the suffix.
// s small square 75x75
// q large square 150x150
// t thumbnail, 100 on longest side
// m small, 240 on longest side
// n small, 320 on longest side
// - medium, 500 on longest side ... etc
getUrl(suffix: string) {
return 'https://farm' + this.farm +
'.staticflickr.com/' + this.server +
'/' + this.id + '_' + this.secret + '_' + suffix + '.jpg';
}
}
THe HTML template calls getUrl('q')
for each photo in the returned set.
<div *ngFor="let photo of photos" class="photo-thumbnail">
<img [src]="photo.getUrl('q')" />
</div>
This results in the error
Uncaught Error: Error in ./PhotosPage class PhotosPage - inline template:13:9 caused by: self.context.$implicit.getUrl is not a function
Additional code:
src/pages/photos.ts
import { Component } from '@angular/core';
import { Photo } from '../../models/photo';
import { FlickrService } from '../../services/flickr.service'
@Component({
selector: 'page-photos',
templateUrl: 'photos.html'
})
export class PhotosPage {
photos: Photo[];
constructor(private flickrService: FlickrService) {
// Get photos data from Flickr (this is working as expected)
flickrService.getPhotos().subscribe(photos => {
this.photos = photos;
});
}
}
services/flickr.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import { Photo } from '../models/photo';
@Injectable()
export class FlickrService {
constructor(public http: Http){}
// Load the first 100 photos for a user (this is working as expected)
getPhotos(): Observable<Photo[]> {
return this.http.get('https://api.flickr.com/path/to/api/call')
.map(res => <Photo[]>res.json().photos.photo);
}
}