时间戳

首页 > 解决方案 > 我在以下组件中收到“无法设置未定义的属性‘变量’”

angular - 我在以下组件中收到“无法设置未定义的属性‘变量’”

问题描述

该组件将呈现从 API 获取的值列表。我收到以下组件初始化问题：

Cannot set property 'hits' of undefined

显示-recipes.component.ts：

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

@Component({
  selector: 'app-display-recipes',
  templateUrl: './display-recipes.component.html',
  styleUrls: ['./display-recipes.component.css']
})
export class DisplayRecipesComponent implements OnInit {

  @Input() calories: String;
  @Input() recipe: String;
  recipeResult: RecipeGlobal;
  constructor(private searchRecipeService: SearchRecipeService) { }

  ngOnInit() {
     this.recipeResult.hits = [];
  }

  ngOnChanges(){
    this.getRecipeInfo();
  }

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

}

显示-recipes.component.html

<p>display-recipes works!</p>
<div id='display_recipe'  *ngFor="let recipe of recipeResult.hits">
    {{recipe.label}}
</div>

RecipeGlobal.ts

export class RecipeGlobal{
    q: String;
    hits: Recipe[];
}

export class Recipe{
    image: String;
    calories: String;
    label: String
}

我无法理解对象是如何在打字稿中初始化的。如果我在对象中声明一个非原始对象，我是否必须对其进行初始化？如果是这样，在这种情况下我应该如何初始化数组？

标签： angular

解决方案

由于这行代码，您的错误正在发生

 ngOnInit() {
 this.recipeResult.hits = [];
  }

由于recipeResult变量尚未定义。

ngOnInit生命周期钩子会在从 api 获取数据之前被调用。

现在您必须事先定义recipeResult变量，例如在哪里声明它，将该行更改为此

recipeResult: RecipeGlobal = new RecipeGlobal();

谢谢。

推荐阅读