title: Angular 2: A property set during OnInit is undefined on the template
body: <p>I have this component: </p>
  
  <pre><code>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 =&gt; {
        //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 =&gt; this.errorMessage = &lt;any&gt;error
      )
    }
  }
  </code></pre>
  
  <p>In the component's template I have this:</p>
  
  <pre><code>&lt;h1&gt;{{category.attributes.name}}&lt;/h1&gt;
  </code></pre>
  
  <p>When I navigate to this component, I get an error:</p>
  
  <pre><code>TypeError: cannot read property 'attributes' of undefined
  </code></pre>
  
  <p>why is the <code>category</code> property on the template undefined and how can I solve this?</p>