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

【问题标题】：angular: cannot read property 'x' of undefined角度：无法读取未定义的属性“x”
【发布时间】：2021-08-03 03:37:28
【问题描述】：

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

<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 前后，此错误不断出现。

【问题讨论】：

标签： json angular api

【解决方案1】：

问题是你的模型配置错误，修复它改变它：

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

【讨论】：

【解决方案2】：

那是因为 RecipeInformation 此时未定义：

recipeInformation:Recipe;

您可以使用*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>

详细了解安全导航操作员here

【讨论】：