title: access field of an object from observable in Angular2
body: <p>I am trying to extract an object from database using observable. after I retrieve the object and put it inside a variable, I can only get the whole object into my template and as soon as I try to access any specific field of the object I get an error.</p>
  
  <p>Here is my service which has a function that returns an observable with the type that I want. It basically looks in the database and returns a list of Item objects that their URL is equal to my URL variable: </p>
  
  <pre><code>  getItemByUrl(url : string):Observable&lt;Item[]&gt;{
      return this.angularFire.database.list('items',{query:{
          orderByChild: 'url',
          equalTo: url}
      })
  </code></pre>
  
  <p>Now, in my main component I use this function to take the list and then I put the first item of the list into my own item object, so I can use it in my own program: </p>
  
  <pre><code>ngOnInit(){
  
  
     this.itemService.getItemsByUrl(this.url)
      .subscribe(res =&gt; this.item = res[0])
  }
  </code></pre>
  
  <p>Now I pass my item to the template with:</p>
  
  <pre><code>{{item | json}}
  </code></pre>
  
  <p>and everything is fine and I see the whole object. But as soon as I try to access on of the fields in the item such as {{item.name}} I get the error: </p>
  
  <pre><code>Cannot read property 'name' of undefined
  </code></pre>
  
  <p>any ideas why?</p>