Angular 2: Ein Objekt während OnInit auf der Vorlage nicht definiert ist

Question

ich diese Komponente haben:

export class CategoryDetailComponent implements OnInit{ 
    category: Category; 
    categoryProducts: Product[]; 
    errorMessage: string; 
    constructor(private _categoryService: CategoryService, private _productService: ProductService, private _routeParams: RouteParams) {} 

    ngOnInit() { 
    this.getCategoryAndProducts(); 
    } 
    getCategoryAndProducts() { 
    let categoryName = this._routeParams.get('name'); 
    let categoryId = this.routeParams.get('id'); 
    var params = new URLSearchParams(); 
    params.set('category', categoryName); 

    Observable.forkJoin(
     this._categoryService.getCategory(categoryId), 
     this._productService.searchProducts(params) 
    ).subscribe(
     data => { 
     //this displays the expected category's name. 
     console.log("category's name: "+ data[0].attributes.name) 
     this.category = data[0]; 
     this.categoryProducts = data[1]; 
     }, error => this.errorMessage = <any>error 
    ) 
    } 
} 

In der Vorlage Komponente Ich habe diese:

<h1>{{category.attributes.name}}</h1> 

Wenn ich auf diese Komponente zu navigieren, ich erhalte eine Fehlermeldung:

TypeError: cannot read property 'attributes' of undefined 

warum ist die category Eigenschaft auf der Vorlage nicht definiert und Wie kann ich das lösen?

Answer 1

Die Bindungen in der Vorlage werden vor ngOnInit() ausgewertet. Um zu verhindern, Angular einen Fehler werfen Sie

<h1>{{category?.attributes.name}}</h1> 

Der Elvis Operator verhindert Angular Auswertung .attributes... es sei denn category einen Wert verwenden können.

Answer 2

Sie können dies auch lösen, indem Sie Ihre Variablen initialisieren.

Init dies während erklärt:

export class CategoryDetailComponent implements OnInit{ 
    category: Category = new Category(); 
    ... 
    ... 
} 

OR init in Component Konstruktor:?

constructor(....) { 
    this.category = new Category(); 
}