Início / coding / Perguntas / 78357250
Accepted
Razvan Zamfir
Asked: 2024-04-20 14:50:11 +0800 CST

O que faz com que a propriedade 'resultados' não exista no erro de tipo neste aplicativo Angular 16?

  • 772

Tenho trabalhado em um SPA com Angular 16, TypeScript e The Movie Database (TMDB).

Em app\services\movie-service.service.tseu tenho:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { MovieResponse, Movie } from '../models/Movie';

@Injectable({
  providedIn: 'root'
})

export class MovieService {

  constructor(private http: HttpClient) { }

  public getMovies(): Observable<MovieResponse[]> {
    return this.http.get<MovieResponse[]>(`${environment.apiUrl}/movie/now_playing?api_key=${environment.apiKey}`);
  }
}

O modelo app\models\Movie.tsfica assim:

export interface Movie {
    id?: number;
    adult?: boolean;
    backdrop_path?: string;
    poster_path?: string;
    title?: string;
    tagline?: string;
    overview?: string;
    genre_ids?: any;
    original_title?: string;
    release_date?: string;
    runtime?: number;
    vote_average?: string;
}

export interface MovieResponse {
    results?: Movie[];
    total_pages?: number;
    total_results?: number;
    page?: number;
}

No HomePageComponenteu tento produzir os filmes:

import { Component } from '@angular/core';
import { MovieResponse, Movie } from '../../models/Movie';
import { MovieService } from '../../services/movie-service.service';


@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent {

  public movieResponse!: MovieResponse[];

  public movies: Movie[] = [];

  constructor(private movieService: MovieService) { }

  public getMovies() {
    this.movieService.getMovies().subscribe((response) => {
      this.movieResponse = response;

      console.log(this.movieResponse);

      this.movies = this.movieResponse.results;
    })
  }

  ngOnInit() {
    this.getMovies();
  }
}

A linha console.log(this.movieResponse)mostra basicamente a resposta com o resultsarário, total_pages, etc;

O problema

A linha this.movies = this.movieResponse.resultscausa o erro:

TS2339: Property 'results' does not exist on type 'MovieResponse[]'.

Questões

  1. O que estou fazendo de errado?
  2. Qual é a maneira mais confiável de corrigir esse problema?
javascript

1 respostas

  1. Best Answer

    O movieResponsepossui uma matriz de objetos ( resposta do filme ), cada um com sua própria propriedade de resultados!

    Como a carga útil da solicitação não é compartilhada, podemos apenas acessar o resultsprimeiro elemento!

    Você pode acessar apenas um elemento do array, em vez de acessar o array inteiro!

      public getMovies() {
    this.movieService.getMovies().subscribe((response) => {
      this.movieResponse = response;

      console.log(this.movieResponse);

      this.movies = this.movieResponse[0].results; // <-  changed here!
    })
  }

    Se da API você receber apenas uma resposta de filme, será necessário alterar o código abaixo. Onde podemos substituir MovieResponse[]porMovieResponse

      public getMovies(): Observable<MovieResponse> {
    return this.http.get<MovieResponse>(`${environment.apiUrl}/movie/now_playing?api_key=${environment.apiKey}`);
  }

    ts

    export class HomePageComponent {

  public movieResponse!: MovieResponse;

  public movies: Movie[] = [];

  constructor(private movieService: MovieService) { }

  public getMovies() {
    this.movieService.getMovies().subscribe((response) => {
      this.movieResponse = response;

      console.log(this.movieResponse);

      this.movies = this.movieResponse.results;
    })
  }

  ngOnInit() {
    this.getMovies();
  }
}
    • 1

relate perguntas