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

【问题标题】：Angular - fetch data from api, probleme first time array is undefinedAngular - 从api获取数据，问题第一次数组未定义
【发布时间】：2023-04-07 16:37:01
【问题描述】：

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

Screen of my console displaying the issue

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)
  }
}

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

【问题讨论】：

发生这种情况是因为您的控制台不在您的订阅范围内。将它们放入您的订阅中，它应该可以工作。

标签： angular api service get fetch

【解决方案1】：

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

console.log(this.movies)

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

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

【讨论】：