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!!
this.movie$
no es lo que tú esperasGET /movie/{movie_id}
, por lo que veo en el esquema la propiedad que tiene la ruta de la imagen parece serposter_path
y noimage
como estas usando. slds