How to display json object using *ngFor
<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>