Typescriptのデータバインディングにオブジェクト関数を公開するIonic

Question

Ionic HTMLテンプレートのTypescriptモデルオブジェクトで関数を呼び出すにはどうすればよいですか？これを試みると、エラーself.context.$implicit.myFunctionName is not a functionが発生します。

Flickr APIの写真をIonic2アプリに表示したいとします。 Flickr写真へのURLを構築するには、APIレスポンスで提供されるいくつかのデータフィールドを連結し、目的の写真解像度を示す接尾辞を追加する必要があります。これは、PhotoモデルのgetUrl関数で行われます。

のsrc /モデル/ 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'; 
    } 
} 

HTMLテンプレートは、返されたセット内の各写真をgetUrl('q')を呼び出します。

のsrc /ページ/ 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; 
    }); 
    } 
} 

サービス/

をflickr.service.ts：

<div *ngFor="let photo of photos" class="photo-thumbnail"> 
    <img [src]="photo.getUrl('q')" /> 
</div> 

これは

Uncaught Error: Error in ./PhotosPage class PhotosPage - inline template:13:9 caused by: self.context.$implicit.getUrl is not a functionが

追加のコードはエラーになります

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); 
    } 
} 

Answer 1

これで、Javascript言語がうまくいかない場所が表示されます。 問題は、サーバーから写真を取得するときに、純粋なjsonオブジェクトであることです（当然、サーバーから来るJSONで定義された関数を持つことができないためです）。実際にキャスティングは何もしません。あなたが透明化した後、それは削除され、唯一の理由はそれを置く必要があります。オートコンプリートを取得する/プロジェクトをより良く見えるようにして、他の開発者が実際に何が起こっているかを知るようにします。あなたのgetUrl関数はインスタンス関数ですが、その配列の写真は写真のインスタンスではありません（キャスティングは何もしません）。だから、JSONをTypescriptオブジェクトに変換する何らかの種類のシリアライゼーションツールが必要です（そして、現時点ではクリーンな方法はありません）。あなたは二つのことを行うことができます。

1. 反復あなたがバックエンドから取得する配列を、それぞれの写真のための新しいインスタンスを作成します。例：VAR写真=新しい写真（URLなど）。 photos.push（写真）などを使用して実際にクラスのインスタンスを作成します。その後、そのメソッドを呼び出すことができます。

2. どこでも使うことができるので、createUrl（写真）< - 写真全体のオブジェクトのように使用できる静的関数を作成します。 （現時点での最良の方法）（代わりにphoto.createUrl（）の）

3. 私は、これはあなたを助けることを願っています

（複雑すぎる）直列化を行っているいくつかのライブラリを検索します。

活字体のパワーは、あなたがデザイン時サポートを取得し、実行時ではないということですサポート:(