Невозможно прочитать свойство undefined, хотя pojo правильно реализован

Question

Я пытаюсь отобразить ответ от API и поместить его в html. Вот основные классы

app.component. html

<h1>sneaky calories work!!</h1>
your query is {{recipeResult.q}}
<div *ngFor = "let recipeIn of recipeResult.hits">
    {{recipeIn.label}} {{recipeIn.url}}
<div>

app.component.ts

import { Component } from '@angular/core';
import { SearchRecipeService } from './recipe-service.service';
import { RecipeGlobal } from './pojos/recipe';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'SnearkyCalories';
  recipeResult: RecipeGlobal;
  constructor(private searchRecipeService: SearchRecipeService){}

  ngOnInit(){
    this.getRecipeInfo();
    console.log(this.recipeResult.hits);
  }

  getRecipeInfo(){
    this.searchRecipeService.getRecipeInfo().
    subscribe(recipeResult => this.recipeResult = recipeResult);
 }
}

Recipe.ts:

export interface RecipeGlobal {
    q:     string;
    from:  number;
    to:    number;
    more:  boolean;
    count: number;
    hits:  Hit[];
}

export interface Hit {
    recipe:     Recipe;
    bookmarked: boolean;
    bought:     boolean;
}

export interface Recipe {
    uri:             string;
    label:           string;
    image:           string;
    source:          string;
    url:             string;
    shareAs:         string;
    yield:           number;
    dietLabels:      string[];
    healthLabels:    string[];
    cautions:        any[];
    ingredientLines: string[];
    ingredients:     Ingredient[];
    calories:        number;
    totalWeight:     number;
    totalTime:       number;
    totalNutrients:  { [key: string]: Total };
    totalDaily:      { [key: string]: Total };
    digest:          Digest[];
}

export interface Digest {
    label:        string;
    tag:          string;
    schemaOrgTag: null | string;
    total:        number;
    hasRDI:       boolean;
    daily:        number;
    unit:         Unit;
    sub?:         Digest[];
}

export enum Unit {
    Empty = "%",
    G = "g",
    Kcal = "kcal",
    Mg = "mg",
    Μg = "µg",
}

export interface Ingredient {
    text:   string;
    weight: number;
}

export interface Total {
    label:    string;
    quantity: number;
    unit:     Unit;
}

recipe-service.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable, of} from 'rxjs';
import {catchError, map, tap} from 'rxjs/operators'
import { Component, OnInit, Input } from '@angular/core';
import {RecipeGlobal, Recipe} from './pojos/recipe'

@Injectable({
  providedIn: 'root'
})
export class SearchRecipeService {

  constructor(
    private http: HttpClient) {}

    private searchUrl = 'https://api.edamam.com/search?q=bandeja paisa&app_id=xxxx&app_key=xxxxx&from=0&to=3&calories=591-722&health=alcohol-free';

  getRecipeInfo(): Observable<RecipeGlobal>{
         return this.http.get<RecipeGlobal>(this.searchUrl);
  }


}

Я получаю эту ошибку в консоли chrome: не удается прочитать "совпадения" свойств с неопределенным

Я попытался распечатать объект прямо в консоли, но все равно выдает ту же ошибку. Похоже, что хиты не анализируются должным образом.

Answer 1

Ошибка просто потому, что вы пытаетесь получить доступ к recipeResult до того, как он будет возвращен асинхронно.

ngOnInit(){
  this.getRecipeInfo();
  // ERROR: this.recipeResult hasn't been returned from the service yet
  // console.log(this.recipeResult.hits);
}

getRecipeInfo(){
  this.searchRecipeService.getRecipeInfo().
  subscribe(recipeResult => {
    this.recipeResult = recipeResult);
    // Move here, it will now log correctly after the recipeResult has been returned
    console.log(this.recipeResult.hits);
  })
}

И вам также нужно обработать нулевой recipeResult в вашем компоненте с помощью ? ( > = v9) или *ngIf:

<div *ngFor = "let recipeIn of recipeResult?.hits">
    {{recipeIn.label}} {{recipeIn.url}}
<div>

<!-- alternative for < Angular 9 -->
<ng-container *ngIf="recipeResult>
  <div *ngFor = "let recipeIn of recipeResult?.hits">
      {{recipeIn.label}} {{recipeIn.url}}
  <div>
</ng-container>

Answer 2

recipeResult по-прежнему не определено при создании компонента. Вы должны использовать оператор безопасной навигации или использовать *ngIf:

<div *ngFor="let recipeIn of recipeResult?.hits">

или

<ng-container *ngIf="recipeResult">
  <h1>sneaky calories work!!</h1>
  your query is {{recipeResult.q}}
  <div *ngFor = "let recipeIn of recipeResult.hits">
    {{recipeIn.label}} {{recipeIn.url}}
  <div>
</ng-container>