1

Estoy haciendo una aplicación con la API de TMDB y angular. Estoy intentando acceder a los datos de detalle de la página a través de mi componente "detail" y me da el siguiente error: "Type 'Subscription' is missing the following properties from type 'Observable': source, operator, lift, subscribe, and 3 more.ts(2740)"

Aquí la función que aparece en mi servicio "dataService":

getMoviesById(id:string): Observable<Movie> {
    return this.http.get<Movie>(this.url+`/movie/${id}?api_key=${environment.api_key}&language=en-US`);
  }

Aquí el código de "detail-component.ts"

import { Component, OnInit } from '@angular/core';
import { Movie } from 'src/app/Model/movie';
import { DataService } from 'src/app/Service/data.service';
import { ActivatedRoute } from '@angular/router'
import { Observable } from 'rxjs'

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {

  movie$ !: Observable<Movie>;


  constructor(private dataService: DataService, private route:ActivatedRoute) { }

  ngOnInit(): void {
    this.movie$ = this.route.params.subscribe((params) => this.dataService.getMoviesById(params.id));
  }

}

Por último, aquí el código de "detail-component.html"

  <img src="{{ movie.image }}"
        alt="Movie Image Not Available"
        class="movie__thumbnail-poster"/>
        <h6 class = title>{{movie.title}}</h6>
          <p>Release : <span class="p-1"> {{ movie.release | date }}</span></p>
          <p>Language : <span class="p-1"> {{movie.original_language}}</span></p>
          <div class="rating-circle">Rating: {{movie.vote_average}}</div>
</div>
´´´

Muchas gracias de antemano!!!

1 respuesta 1

2

Prueba de la siguiente manera:

En tu clase:

import { Component, OnInit } from '@angular/core';
import { Movie } from 'src/app/Model/movie';
import { DataService } from 'src/app/Service/data.service';
import { ActivatedRoute } from '@angular/router'
import { Observable } from 'rxjs'
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {

  movie$: Observable<Movie>;

  constructor(private dataService: DataService, private route:ActivatedRoute) { }

  ngOnInit(): void {
    this.movie$ = this.route.params.pipe(
      switchMap((params) => this.dataService.getMoviesById(params.id))
    )
  }

}

Luego en tu plantilla:

<ng-container *ngIf="movie$ | async as movie">
  <img 
    src="{{ movie.image }}"
    alt="Movie Image Not Available"
    class="movie__thumbnail-poster"
  />
  <h6 class = title>{{movie.title}}</h6>
  <p>Release : <span class="p-1"> {{ movie.release | date }}</span></p>
  <p>Language : <span class="p-1"> {{movie.original_language}}</span></p>
  <div class="rating-circle">Rating: {{movie.vote_average}}</div>
</ng-container>

Una breve explicación de los cambios:

En tu clase aplicas un pipe con un operador switchMap() ya que debes tomar los params del primer Observable que es route.params y pasarle el id a tu segundo Observable que es la llamada del servicio.
En tu plantilla usas primeramente un *ngIf para asegurarte que renderice los elementos una vez que el movie$ emita el valor con async. Usas el alias movie para ese valor emitido, y lo empleas en el resto de la plantilla.

Espero que esto te funcione y de tener alguna duda o presentar algún problema con el código puedes preguntar.

EDICIÓN (Esto es opcional):

Si deseas chequear los datos, por ejemplo imprimiendo en la consola, puedes realizar estos cambios temporalmente.
En tu clase en el pipe del Observable luego de aplicado el operador switchMap() aplicar un operador tap() que simplemente te permite obtener el valor que emite el Observable en determinado momento sin interrumpir el flujo del mismo.

Primeramente importas el operador tap:

import { switchMap, tap } from 'rxjs/operators';

Luego lo usas en el pipe de la siguiente manera:

  ngOnInit(): void {
    this.movie$ = this.route.params.pipe(
      switchMap((params) => this.dataService.getMoviesById(params.id)),
      tap(movie => console.log(movie))
    )
  }

Por supuesto existen otras opciones para este caso en el que quieres revisar tu llamada http al API sin necesidad de modificar tu código, como es el caso de las DevTools del propio navegador que suelen traer una sección de Network donde puedes observar las llamadas http que realizas y sus respuestas.
Simplemente creí oportuno introducir el uso del operador tap() ya que es muy utilizado cuando trabajas con tipos Observable y puedes usarlo en situaciones como esta.

7
  • Muchas gracias Cybering!! Funcionó perfecto!! :) Commented el 5 sept. 2022 a las 6:54
  • Lo que no consigo es bindear la imagen, no entiendo por qué si el resto de información fluye correctamente... ¿Alguna idea? Gracias!! Commented el 5 sept. 2022 a las 7:52
  • 1
    Debería funcionarte o bien la forma que estás empleando, o [src]="movie.image". Voy a agregar a la respuesta una forma de chequear los datos obtenidos de la llamada para que puedas ver si llegan correctamente.
    – cybering
    Commented el 5 sept. 2022 a las 10:45
  • Gracias por el tip! Lo he aplicado y esto es lo que sale por consola: "tap Object { adult: false, backdrop_path: "/ugS5FVfCI3RV0ZwZtBV3HAV75OX.jpg", belongs_to_collection: {…}, budget: 0, genres: (3) […]," La propiedad que debería de bindear en el html es backdrop_path, pero aun así, sigue sin mostrarse la imagen. No lo consigo entender cuando el resto de info la paso sin problema... Eso sí, la consola me lanza ahora el siguiente error: GEThttp://localhost:4200/pIkRyD18kl4FhoCNQuWxWu5cBLM.jpg ¿Alguna idea? Muchas gracias por tus aportes! Commented el 5 sept. 2022 a las 12:48
  • 1
    Lo que sucede acá es que tu API te devuelve una ruta relativa de la imagen, en lugar de devolverte la URL completa. En este caso pudiste resolver el problema porque conoces la URL "base" de la imagen, pero este no siempre es el caso porque puedes usar imágenes de distintas fuentes. En mi opinión, esto es más algo que se deba resolver del lado del backend y que te devuelva la URL completa.
    – cybering
    Commented el 5 sept. 2022 a las 13:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.