Angular 2管道,正确使用observable,我的管道不会返回海报路径

Question

我正在试着打电话给我的服务,为我的所有电影获取海报网址(想要展示他们的海报).我正在使用Angular2并且现在已经创建了一个应该完成工作的管道.

我有这个代码:

<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的电影,它将显示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";
    }
}
}

管道应该返回海报网址.问题是我提供的代码不起作用.它不会加载网址并显示图片.在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