0

Estoy haciendo una aplicación con The Movie Database y quiero evitar que en la consola me salga un error de tipo "Undefined".

Entiendo que primero debo verificar si el objeto o variable al que estoy tratando de acceder existe o está definido con una verificación if(), pero la verdad que esto no sé como traducirlo a código ni sé donde debo implementarlo.

Os pego el código de "movieDetails.html" para que os hagáis una mejor idea de lo que necesitaría.

Muchas gracias!!

<div #moviedetails class="movie-details">

  <section class="header" >
      <app-header [data]="movieDetails"></app-header>
  </section>


  <main id="main">
      <div class="movie-poster-img">
          <div *ngIf="movieDetails.poster_path==null;then thenBlock else elseBlock"></div>
          <ng-template #thenBlock><img src="assets/images/no-image.png" alt="figure" class="no-image"></ng-template>
          <ng-template #elseBlock><img [attr.src]="highqualityImgUrl+movieDetails.poster_path" alt="{{movieDetails.title}}"></ng-template>
      </div>
  </main>


  <div class="text-center mt-5" *ngIf="movieDetails.logoList!=null">
      <img id="movie-logo" src="{{imgUrl+movieDetails.logoList.file_path}}">
  </div>


  <h1 class="movie-heading mt-5">More About {{movieDetails.title}}</h1>
  <div class="movie-content">
      <table class="details-table">
          <tbody>
              <tr>
                  <td class="details-name">Original Name</td>
                  <td  class="colon"> | </td>
                  <td class="details-value">{{movieDetails.original_title}}</td>
              </tr>
              <tr>
                  <td class="details-name">Release Date</td>
                  <td class="colon"> | </td>
                  <td class="details-value">{{movieDetails.release_date | date}}</td>
              </tr>
              <tr>
                  <td class="details-name">Status</td>
                  <td class="colon"> | </td>
                  <td class="details-value">{{movieDetails.status}}</td>
              </tr>
              <tr>
                  <td class="details-name">Run Time</td>
                  <td class="colon"> | </td>
                  <td class="details-value">{{movieDetails.runtime+" min"}}</td>
              </tr>
              <tr>
                  <td class="details-name">Rating</td>
                  <td  class="colon"> | </td>
                  <td class="details-value" > {{'( '+movieDetails.vote_average+' / 10 )'}}
                      <ngb-rating [max]="10" [(rate)]="movieDetails.vote_average" [readonly]="true"></ngb-rating>
                  </td>
              </tr>
              <tr>
                  <td class="details-name">Original Language</td>
                  <td class="colon"> | </td>
                  <td class="details-value">{{movieDetails.original_lan}}</td>
              </tr>
              <tr class="tr-overview">
                  <td class="details-name">OverView</td>
                  <td class="colon"> | </td>
                  <td class="details-value movie-description">{{movieDetails.overview}}</td>
              </tr>
              <tr>
                  <td class="details-name">Production</td>
                  <td class="colon"> | </td>
                  <td class="details-value">
                      <span *ngFor="let prod of movieDetails.production_companies; let i=index;">
                              <span>{{prod.name}}<span *ngIf='movieDetails.production_companies.length!=i+1'> , </span>
                            </span>
                      </span>
                  </td>
              </tr>
              <tr>
                  <td class="details-name">Genres</td>
                  <td class="colon"> | </td>
                  <td class="details-value">
                      <span *ngFor="let genre of movieDetails.genre;let i=index;">
                          {{genre.name}}
                          <span *ngIf='movieDetails.genre.length != i+1'> , </span>
                      </span>
                  </td>
              </tr>
          </tbody>
      </table>
  </div>
</div>

Si necesitáis el contenido de movieDetails.ts, os lo facilitaría también en cualquier respuesta.

import { Component, OnInit, Inject, HostListener } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { MovieDetails} from 'src/app/core/interface/movie-details';
import myAppConfig from 'src/app/core/config/my-app-config';
import { MoviesService } from 'src/app/services/movies.service';

var movie_id=0;

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

  imgUrl:string=myAppConfig.tmdb.imgUrl;
  highqualityImgUrl:string=myAppConfig.tmdb.highQualityImgUrl;

  movieDetails:MovieDetails={} as MovieDetails;

  windowScrolled: boolean=false;

  constructor(private route:ActivatedRoute,private router:Router,private movieservice:MoviesService,private _sanitizer:DomSanitizer) {
    let id=this.route.snapshot?.params['id'];
    movie_id=id;
    this.movieDetails.crewList=[];
  }

  ngOnInit(): void {
    this.router?.navigateByUrl('/moviedetails/'+movie_id);

    this.getMovieDetails(movie_id);
  }

  getMovieDetails(id:number) {


    let api_url=myAppConfig.tmdb.movieBaseUrl+'/movie/'+id+'?'+myAppConfig.tmdb.apikey;
    this.getMovieDetailsData(api_url);

    
    let backdrop_url=myAppConfig.tmdb.movieBaseUrl+"/movie/"+movie_id+"/images?"+myAppConfig.tmdb.apikey;
    this.getMovieImages(backdrop_url)
  }


  getWatchprovider(watch_provider: string) {
    this.movieservice.getWatchProviders(watch_provider);

    let watch:any;
    this.movieservice.watchData.subscribe((data)=>{
      watch=data;
      this.movieDetails.watchprovider=watch.results.IN[0]?.link;
    })
  }

  getMovieImages(backdrop_url: string) {
    this.movieservice.getAllImages(backdrop_url);

    let tempimagesData:any;
    this.movieservice.movieallImageData.subscribe((data)=>{
        tempimagesData=data;

        if(tempimagesData.backdrops.length=='0'){
          this.movieDetails.background_image=null;
        }
        else{
          this.movieDetails.backdropList=tempimagesData.backdrops;

          this.movieDetails.background_image=this.highqualityImgUrl+tempimagesData.backdrops[0].file_path;
        }

        //Movie Posters Images
          this.movieDetails.posterList=tempimagesData.posters;

        //Movie Logo Images
        if(tempimagesData.logos.length<0){
          this.movieDetails.logoList.file_path=null;
        }else{

          this.movieDetails.logoList=tempimagesData.logos[0];
        }
    })
  }

  getMovieDetailsData(url: string) {
    this.movieservice.getMovieDetails(url);

    let tempMovieDetails:any;
    this.movieservice.moviedetailsData.subscribe((data)=>{

      tempMovieDetails=data;

      //Default Movie Details
      this.movieDetails.title=tempMovieDetails.title;
      this.movieDetails.backdrop_path=tempMovieDetails.backdrop_path;
      this.movieDetails.backdrop_path=tempMovieDetails.backdrop_path;
      this.movieDetails.id=tempMovieDetails.id;
      this.movieDetails.original_lan=tempMovieDetails.original_language;
      this.movieDetails.original_title=tempMovieDetails.original_title;
      this.movieDetails.overview=tempMovieDetails.overview;
      this.movieDetails.popularity=tempMovieDetails.popularity;
      this.movieDetails.poster_path=tempMovieDetails.poster_path;
      this.movieDetails.production_companies=tempMovieDetails.production_companies;
      this.movieDetails.production_countries=tempMovieDetails.production_countries;
      this.movieDetails.runtime=tempMovieDetails.runtime;
      this.movieDetails.genre=tempMovieDetails.genres;
      this.movieDetails.release_date=tempMovieDetails.release_date;
      this.movieDetails.status=tempMovieDetails.status;
      this.movieDetails.vote_average=tempMovieDetails.vote_average;

      if(tempMovieDetails.homepage==""){
        var watch_provider=myAppConfig.tmdb.movieBaseUrl+'/movie/'+movie_id+"/watch/providers?"+myAppConfig.tmdb.apikey;
        this.getWatchprovider(watch_provider);
      }else{
        this.movieDetails.watchprovider=tempMovieDetails.homepage;
      }
    })
  }
}
´´´

3
  • Creo que si añades movieDetails.ts y también el error de consola que te sale te podremos ayudar mejor. Este tipo de errores suelen aparecer cuando hay una variable de JavaScript (o typescript en tu caso) no definida.
    – David DPG
    Commented el 24 oct. 2022 a las 12:40
  • Hola! gracias por tu respuesta. He pegado movieDetails.ts editando la entrada. Commented el 24 oct. 2022 a las 13:35
  • Quizá esta respuesta te ayude un poco: es.stackoverflow.com/questions/225800/… Commented el 24 oct. 2022 a las 13:41

1 respuesta 1

0

Con snapshot solo accederá al parámetro una vez al cargar al componente Entonces usamos Observables mediante:

      id!:number | null;
          constructor(private route:ActivatedRoute,private router:Router) { }
        
          ngOnInit(): void {
            //  ActivatedRoute.paramMap: Observable<ParamMap>
            // al subscribirnos el observer params recibira los datos emitidos por el Observable
            this.route.paramMap.
            subscribe((params:ParamMap)=>{
    // this.id= parseInt(params.get('id')!),de acuerdo al tipo que //recibas
              this.id= +params.get('id')!,
console.log(this.id)
//this.router?.navigateByUrl('/moviedetails/'+this.id);
                (error: any) =>console.log(error)
              })
            
            }
            
2
  • Gracias!! Lo pruebo en breve y te comento :) Commented el 25 oct. 2022 a las 6:19
  • supuestamente se navega desde Movies a MoviesDetail porque this.router?.navigateByUrl('/moviedetails/'+this.id);??
    – nestdan
    Commented el 25 oct. 2022 a las 12:55

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.