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

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

1 个答案: