title: Using typescript to access first item of the array, but the browser return the property undefined
body: <p>I write a <code>getFooterContent</code> method and i want to show data that through <code>getFooterContent</code>, but I have the following mistake:</p>
  
  <p>platform-browser.umd.js:1900 </p>
  
  <blockquote>
    <p>ORIGINAL EXCEPTION: TypeError: Cannot read property 'content' of
    undefined</p>
  </blockquote>
  
  <pre><code>getFooterContent(){
      return this.homepageService
                           .getFooter()
                           .then(content =&gt; this.footerContent = content)
                           .catch(error =&gt; this.error = error);
  }
  
  ngOnInit(){
      this.getFooterContent();
      console.log(this.footerContent);
  }
  </code></pre>
  
  <p>and my html code </p>
  
  <pre><code>&lt;footer class="c-footer"&gt;
  &lt;div class="c-footer--service"&gt;
      &lt;span&gt;{{ footerContent[0].content}}&lt;/span&gt;
      &lt;span&gt;{{ footerContent[1] }}&lt;/span&gt;
  &lt;/div&gt;
  &lt;h1&gt;{{ footerContent[2] }}&lt;/h1&gt;
  &lt;div class="c-footer__version"&gt;
      &lt;p&gt;{{ footerContent[3] }}&lt;/p&gt;
      &lt;p&gt;{{ footerContent[4] }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><code>this.footerContent</code> first prints <code>[]</code></p>
  
  <p>and second prints </p>
  
  <pre><code>[Object, Object, Object, Object, Object]
  0:Object content:"253548" desc:"service_tel"
  </code></pre>
  
  <p>but i don't know why <code>footerContent[0].content</code> returns undefined?</p>