title: How to display json object using *ngFor
body: <p>I want to display the below data from Firebase </p>
  
  <pre><code>{
     "-KBN9O_qqz-nZ9tPWFdM":{
        "createdAt":1456399292790,
        "isActive":true,
        "name":"Hero 1"
     },
     "-KBN9gjJw1ZlMgt9pVsl":{
        "createdAt":1456399371220,
        "isActive":true,
        "name":"Hero 2"
     },
     "-KBN9hYI4vYAsyh5k1lX":{
        "createdAt":1456399374548,
        "isActive":true,
        "name":"Hero 3"
     }
  }
  </code></pre>
  
  <p>when doing <a href="http://angular.io" rel="noreferrer">angular.io Tour of Heroes</a> tutorial for example</p>
  
  <pre><code>&lt;li *ngFor="#hero of heroes"&gt;
    &lt;span class="badge"&gt;{{hero.id}}&lt;/span&gt; {{hero.name}}
  &lt;/li&gt;
  </code></pre>
  
  <p>So hero id should show for example <code>-KBN9hYI4vYAsyh5k1lX</code>
  and hero name should show for example <code>hero 3</code></p>
  
  <hr>
  
  <p>I have done some research and come across this stackoverflow solution by @Thierry Templier <a href="https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor">access key and value of object using *ngFor</a></p>
  
  <p>(1) Is this the right solution to my problem?</p>
  
  <p>(2) Is there a simpler solution to this problem because I feel that it would be really common for developers using Angular2 to display such json data.</p>