时间戳

首页 > 解决方案 > 角度：无法读取未定义的属性“x”

json - 角度：无法读取未定义的属性“x”

问题描述

我不断收到Cannot read property 'id' of undefined我的 HTML 组件中的错误

<button (click)="getRecipeDetails()">Show</button>
 
<div>
    <div [innerHTML]="recipeInformation.id"></div> <br>
    <div [innerHTML]="recipeInformation.title"></div> <br>
    <div [innerHTML]="recipeInformation.summary"></div> <br>
    <div [innerHTML]="recipeInformation.dishTypes"></div> <br>
</div>

这是我在组件 TS 中制作的代码：

export class AppComponent {
  recipeInformation:Recipe;

  constructor(private http: HttpClient){}

  // Get Recipe Details:
  getRecipe(id:any='782698'): Observable<Recipe[]> {
    let params = new HttpParams().set('apiKey',Constants.API_KEY)
    
    return this.http.get(URL,{params}).pipe(
      map(json: Object) => [json].map(jsonItem => Recipe.fromJson(jsonItem)))
    );
  }
  getRecipeDetails(){
    this.getRecipe().subscribe(
     recipes => this.recipeInformation = recipes[0]
    )
  }

这是我的 recipe.ts 课程：

export class Recipe{
    
   constructor(public id: number,
                public title: string,
                public summary: string,
                public dishTypes: []) {
    }
     public static fromJson(json: Object): Recipe {
        return new Recipe(
            json['id'],
            json['title'],
            json['summary'],
            json['dishTypes']
        );
    }
}

单击“显示”按钮后，可以正常检索数据，但是在调用 API 之前和之后，此错误不断出现。

标签： jsonangularapi

解决方案

那是因为RecipeInformation此时未定义：

recipeInformation:Recipe;

您可以使用 an*ngIf来提供帮助。

<button (click)="getRecipeDetails()">Show</button>
 
<div *ngIf="recipeInformation"> 
    <div [innerHTML]="recipeInformation.id"></div> <br>
    <div [innerHTML]="recipeInformation.title"></div> <br>
    <div [innerHTML]="recipeInformation.summary"></div> <br>
    <div [innerHTML]="recipeInformation.dishTypes"></div> <br>
</div>

或使用安全导航运算符：

<button (click)="getRecipeDetails()">Show</button>
 
<div>
    <div [innerHTML]="recipeInformation?.id"></div> <br>
    <div [innerHTML]="recipeInformation?.title"></div> <br>
    <div [innerHTML]="recipeInformation?.summary"></div> <br>
    <div [innerHTML]="recipeInformation?.dishTypes"></div> <br>
</div>

在此处了解有关安全导航操作员的更多信息

推荐阅读