Angular 2 管道，正确使用 observable，我的管道没有 return 海报路径

Question

我正在尝试调用我的服务来获取我所有电影的海报 Url（想要展示它们的海报）。我正在使用 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 的 let movie ，它将显示 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";
    }
}
}

管道应该return海报url。问题是我提供的代码不起作用。它不会加载 url 并显示图片。在 console.log 中，如果我在浏览器中使用它，我可以看到 url 路径实际上是有效的。

如果我这样做：

if (value) {

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

然后它正确显示了图片。所以问题一定是可观察的订阅？

谁能看出这里有什么问题吗？

Answer 1

处理异步操作时应该使用异步管道。记得 return 一个承诺或一个可观察的。

@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

Angular 2 管道，正确使用 observable，我的管道没有 return 海报路径

Angular 2 pipe, using observable correctly, my pipe does not return a poster path

pipe

subscribe

observable

angular