角度2のパイプを観測可能に正しく使用すると、パイプがポスターパスを返さない

Question

私のサービスを呼び出して、私のすべてのムービーのポスターURLを取得しようとしています（ポスターを表示したい）。私はAngular2を使用していますが、今は仕事をするパイプを作成しています。

Iこのコードを持って：あなたはMoviesOnNasのLETムービーを参照してくださいここで

<div class="row small-up-1 medium-up-2 large-up-4"> 
    <div class="column" *ngFor="let movie of MoviesOnNas"> 
     <span>{{movie.MovieYear}}</span> 
     <img src="{{movie.MovieId | poster}}" class="thumbnail" alt=""> 
     {{movie.MovieTitle}} 
    </div> 
</div> 

を、それがMoviesOnNasオブジェクトであり、すべてのムービーが表示されます。ラインで

：

<img src="{{movie.MovieId | poster}}" class="thumbnail" alt=""> 

私は、私が作成したカスタムパイプを使用しようとしています。それはこのように見えます。

@Pipe({ name: 'poster' }) 
export class PosterPipe implements PipeTransform { 

constructor(public movieService: MovieService) { 

} 

transform(value: string, args: string[]): any { 
    if (value) { 
     // Go call api to get poster. 
     this.movieService.getMoviePoster(value).subscribe((data) => { 
      console.log("http://image.tmdb.org/t/p/w500" + data); 
      var poster = "http://image.tmdb.org/t/p/w500" + data; 
      return poster; 
     }); 
    } 
    else { 
     // Insert could not find movie poster. 
     return "../../assets/img/poster.png"; 
    } 
} 
} 

パイプはポスターURLを返す必要があります。問題は、私が提供したコードがうまくいかないことです。 URLを読み込んで画像を表示しません。 console.logでは、ブラウザで使用するとURLパスが実際に動作していることがわかります。私はこのような何かを行う場合は

は：

if (value) { 

    return "http://image.tmdb.org/t/p/w500/bqLlWZJdhrS0knfEJRkquW7L8z2.jpg" 
} 

は、その後、それは正しく画像が表示されます。だから問題は観察可能な購読ですか？

ここで何が間違っているのか分かりますか？

Answer 1

非同期操作を処理する場合は、非同期パイプを使用する必要があります。 約束または観察可能なものを返すことを忘れないでください。

@Pipe({ 
    name: 'poster' 
}) 
class PosterPipe { 
    apiCall; 
    constructor() { 
    // simulate http call 
    this.apiCall = Observable.create(observer => { 
     observer.next("http://lorempixel.com/400/200/sports/"); 
    }); 
    } 

    transform(value: string) { 
    if(value) { 
     return this.apiCall.first(); 
    } 

    return Observable.of("../../assets/img/poster.png"); 


    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <img src="{{MovieId | poster | async}}"> 
    </div> 
    `, 
}) 
export class App { 
    MovieId:string; 
    constructor() { 
    this.MovieId = 'Exists' 
    } 
} 

の作業Plunker