Angular - 从 api 获取数据，问题第一次数组未定义

Question

我从 API 获取数据时遇到问题，我在提交表单时从 API 获取数据。 问题是当我控制台记录数组以查看我收到的元素时，我的数组未定义，并且只有当我第二次单击（提交表单）数组包含数据时。 我尝试在组件电影中的 submitForm function 中控制数组，您可以在代码中看到。

显示问题的控制台屏幕

 import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Subject, Observable, pipe } from "rxjs"; import { Movie } from "../models/movie.model"; import { map } from "rxjs/operators"; import { TvShow } from '../models/tvShow.models'; @Injectable({ providedIn: "root", }) export class SearchService { token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; constructor(private httpClient: HttpClient) {} searchMovie(title): Observable<Movie[]> { return this.httpClient.get<Movie[]>( "https://api.themoviedb.org/3/search/movie?api_key=" + this.token + "&language=fr&query=" + title ).pipe(map((response: any) => response.results)); } }

我第二次提交表单时工作。

 <div class="search"> <form class="form-inline" [formGroup]="movieForm" (ngSubmit)="submitForm()"> <input type="text" id="title" class="form-control form-control-lg" formControlName="title" placeholder="Search for a movie"> <button type="submit" class="btn btn-primary" [disabled]="movieForm.invalid">Search</button> </form> </div> <app-list *ngFor="let movie of movies; let i = index" [indexOfMovie]="i" [movie]="movie"> </app-list>

 import { Component, OnInit } from "@angular/core"; import { Movie } from "src/app/models/movie.model"; import { FormGroup, FormBuilder, Validators } from "@angular/forms"; import { SearchService } from "src/app/services/search.service"; @Component({ selector: "app-movie", templateUrl: "./movie.component.html", styleUrls: ["./movie.component.scss"], }) export class MovieComponent implements OnInit { movies: Movie[]; movieForm: FormGroup; constructor( private searchService: SearchService, private formBuilder: FormBuilder ) {} ngOnInit(): void { this.initForm(); } initForm() { this.movieForm = this.formBuilder.group({ title: ["", Validators.required], }); } submitForm() { const formValue = this.movieForm.value; const movieSearch = formValue["title"]; this.searchService.searchMovie(movieSearch).subscribe((res) => (this.movies = res)); console.log('hello submit') console.log(this.movies) } }

如果有人有想法，我会很高兴！ 谢谢

Answer 1

这是因为您正在使用 http 客户端进行异步调用，这意味着您正在运行时

console.log(this.movies)

您的电影可能无法加载。 您可以将您的 console.log 移动到订阅部分以查看结果。

   this.searchService
      .searchMovie(movieSearch)
      .subscribe((res) => {
           this.movies = res;
           console.log(this.movies);
       });