Saya terus mendapatkan kesalahan Cannot read property 'id' of undefined di komponen HTML saya

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

Berikut adalah kode yang saya buat di komponen 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]
    )
  }

Dan inilah kelas resep.ts saya:

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']
        );
    }
}

Setelah saya mengklik tombol Tampilkan, data diambil dengan baik, tetapi kesalahan ini terus muncul, sebelum dan sesudah saya melakukan panggilan ke API.

0
Hamza Radouan 12 Mei 2021, 21:38

2 jawaban

Jawaban Terbaik

Itu karena RecipeInformation tidak terdefinisi pada saat ini:

recipeInformation:Recipe;

Anda dapat menggunakan *ngIf untuk membantu.

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

Atau gunakan operator navigasi aman:

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

Pelajari lebih lanjut tentang operator navigasi aman di sini

5
AliF50 12 Mei 2021, 18:50

Masalahnya adalah model Anda salah dikonfigurasi, untuk memperbaikinya ubahlah:

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']
        );
    }
}
0
Gabriel Sereno 12 Mei 2021, 18:47