1

Estoy haciendo una página con la API REST de The Movie DB y no consigo que en la página de "detalles" se muestre la imagen, cuando el resto de información si que he conseguido pasarla.

Os detallo el código:

En detail-component.html tengo:

<div *ngIf="movie$ | async as movie">
  <div class="card">
    <img src="{{movie.image}}"  alt="no hay">
    <div class="flex-1 min-w-0">
      <div class="card-body">
        <h6 class=title>{{movie.title}}</h6>
        <p>Release : <span class="p-1"> {{ movie.release_date | date }}</span></p>
        <p>Language : <span class="p-1"> {{movie.original_language}}</span></p>
        <p>Overview : {{movie.overview}}</p>
        <div class="rating-circle">Rating: {{movie.vote_average}}</div>
      </div>
    </div>
  </div>
</div>

En detail component.ts tengo:

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';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http'

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

  movie$ !: Observable<Movie>;
  image!: Movie;

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

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

Gracias!!

7
  • Te recomiendo mirar esta pregunta y respuesta sobre cómo trabajar con parámetros URL: es.stackoverflow.com/questions/225800/… Commented el 5 sept. 2022 a las 10:13
  • Creo que lo que se guarda en this.movie$ no es lo que tú esperas Commented el 5 sept. 2022 a las 10:14
  • A qué te refieres? Commented el 5 sept. 2022 a las 10:15
  • Los observables no se ejecutan a menos que te suscribas a ellos, con lo que ese pipe no está haciendo gran cosa ya que no te suscribes al observable resultante. Commented el 5 sept. 2022 a las 10:18
  • @AnaFernández Si estas usando el endpoint GET /movie/{movie_id}, por lo que veo en el esquema la propiedad que tiene la ruta de la imagen parece ser poster_path y no image como estas usando. slds
    – akotech
    Commented el 5 sept. 2022 a las 12:28

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.