Angular 2-Rohr, mit richtig beobachtbaren, gibt meine Pfeife keinen Poster-Pfad

Question

Ich versuche, meinen Dienst zu rufen, um ein Poster Url für alle meine Filme zu bekommen (Willst du das Poster von ihnen zu zeigen). Ich benutze Angular2 und habe jetzt eine Pipe erstellt, die diese Aufgabe übernehmen sollte.

Ich habe diesen Code:

<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> 

Hier sehen Sie die let Film von MoviesOnNas, werden alle Filme zeigen, dass es in der MoviesOnNas Objekt ist.

In der Zeile:

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

Ich versuche, eine benutzerdefinierte Rohr ich geschaffen habe zu verwenden. Es sieht aus wie das.

@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"; 
    } 
} 
} 

Die Pipe sollte die Poster-URL zurückgeben. Das Problem ist, dass der von mir bereitgestellte Code nicht funktioniert. Es lädt nicht die URL und zeigt das Bild an. In der console.log kann ich sehen, dass der URL-Pfad tatsächlich funktioniert, wenn ich ihn im Browser verwende.

Wenn ich so etwas tun:

if (value) { 

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

Dann zeigt sie das Bild richtig. Also muss das Problem das beobachtbare Subscribe sein?

Kann jemand sehen, was hier falsch sein könnte?

Answer 1

Sie sollten die asynchrone Pipe bei asynchronen Operationen verwenden. Denken Sie daran, ein Versprechen oder eine beobachtbare zurückzugeben.

@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' 
    } 
} 

Arbeiten Plunker