"ERREUR TypeError: Impossible de lire la propriété '...' de unsdefined" dans Angular 2

Question

Im obtenir l'erreur dans le titre dans mon script Angular 2, lors de la récupération des données via mon service, mais le composant de page montre toujours l'info , en utilisant {{bedriften}}, même si j'obtiens l'erreur. Je ne sais pas ce que je fais mal. Quand j'appelle console.log (this.bedriften) il est indéfini, mais est affiché sur la page. Im ne savez pas comment charger correctement les informations avant que la page est affichée à l'utilisateur (je veux dire si la this.bedriften est peuplée)

Mon service:

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 

@Injectable() 
export class HendingService { 
alleHendingar: any; 
data: any; 
constructor(private http: Http) { } 
bed: any; 

hentHendingar() { 
return this.http.get("http://ekstremedia.no/rapporter/allehendingar.json") 
    .map(res => res.json()); 
} 
hentBedrift(bed) { 
    return this.http.get("http://localhost:81/vossapp/get/bedrift/"+bed) 
    .map(res => res.json()); 
    } 
} 

Ma page où je reçois l'erreur:

import { Component, OnInit, AfterContentInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { HendingService } from '../../hending-service.service'; 

@Component({ 
    selector: 'app-bedriftside', 
    templateUrl: './bedriftside.component.html', 
    styleUrls: ['./bedriftside.component.scss'], 
    providers: [HendingService] 
}) 

export class BedriftsideComponent implements OnInit { 
id: number; 
private sub: any; 
bedriften: any; 
constructor(private route: ActivatedRoute, private hs: HendingService) { } 

ngOnInit() { 

    this.sub = this.route.params.subscribe(params => { 
     this.id = params['id']; 
    }); 

    this.hs.hentBedrift(this.id) 
    .subscribe(data => { 
     this.bedriften = data 
    });  
    console.log(this.bedriften); // undefined 
    } 

} 

Answer 1

vous placez l'console.log en dehors du souscrivez il, vous devriez être en mesure d'accéder à une fois la réponse est reçue

this.hs.hentBedrift(this.id) 
    .subscribe(data => { 
     this.bedriften = data; 
     console.log(this.bedriften); 
    }); 

également dans le modèle que vous devez vérifier si la valeur existe en utilisant l'opérateur de sécurité de la navigation

<h1> {{bedriften?.title}}</h1>