2016-12-22 2 views
1

パイプでIDを解決します。サービスでパイプ内のIDを解決する

私はサービス/ apiを毎回呼び出す最良の方法ではないと思いますか?

以前にすべての国を保存する方が良いですか?パイプ内で国名を返すことはできますか?

サービス:

getCountry(id:number) { 
    return this._http.get(this.apiUrl + "/country/" + id).map(res => res.json()); 
} 

パイプ:

export class ResolvePipe implements PipeTransform { 
    constructor(public _formDataService: FormDataService) {} 
    transform(value: number, args: any[]): any { 
    this._formDataService.getCountry(value).subscribe(
     data => console.log(data[0].name) 
    ) 
    } 
} 

EDIT:

<tr (click)="showProfile(customer)" *ngFor="let customer of (customers | search:term)"> 
    <td>...</td><td>{{customer.country_id | resolve | async}}</td> 
</tr> 

答えて

1

まずあなたがObservableを返却する必要があります。 subscribe()に電話するときにはSubscriptionが返されます。また、あなたは実際に追加return

export class ResolvePipe implements PipeTransform { 
    constructor(public _formDataService: FormDataService) {} 
    transform(value: number, args: any[]): any { 
    // added `return` and changed `subscribe` to `map` 
    return this._formDataService.getCountry(value).map(
     data => { 
     console.log(data[0].name); 
     return data; // with `{ }` explicit `return` is required 
     }); 
    ) 
    } 
} 

、あなたが返さObservable

<div>{{someId | myIdPipe | async}}</div> 

または

<some-comp [idProp]="someId | myIdPipe | async></some-comp> 

ようasyncパイプが加入をパイプを使用することができますので、transform()から何かを返す必要がtransformから取得し、結果の値をバインディングに使用します。

+0

ありがとうございます、作品は非常に遅いです。パフォーマンスを向上させるために私は何ができますか? – robert

+1

ここから遅いと言うのは難しいです。サーバーからの応答には長い時間がかかりますか?パイプが頻繁に実行されるため、アプリケーションが遅くなります。私はここからはわかりません。 'FormDataService'の中では、http://stackoverflow.com/questions/36271899/what-is-the-correct-way-to-share-the-result-of-an-angular-2-で議論されているように、キャッシュを維持するかもしれません。 http-network-call-in –

+0

はい、1000回くらいです。キャッシュがこの問題を解決するはずです。 – robert

関連する問題