title: AngularFire2: Realtime Database: how to get key and value
body: <p>I use AngularFire2 to get data from Firebase Database (realtime).</p>
  
  <p>What I have done: </p>
  
  <ul>
  <li>Firebase Database </li>
  </ul>
  
  <blockquote>
    <p>{
      “class” : {
        “student” : {
          “Tom” : “male”,
          “Mary” : “female”,
          “Peter” : “male”,
          “Laura” : “female”
        },
        "numberOfStudent” : 10
      }
    }</p>
  </blockquote>
  
  <ul>
  <li><p>app.component.ts</p>
  
  <pre><code>import { AngularFireDatabase } from 'angularfire2/database';
  import { Observable } from 'rxjs/Observable';
  
  ...
  export class AppComponent {
  
     class: Observable&lt;any&gt;;
     students: Observable&lt;any[]&gt;;
  
  constructor(private db: AngularFireDatabase) {
     this.class = db.object(‘class’).valueChanges();
     this.students = db.list(‘class/student’).snapshotChanges();
   }
  
  } 
  </code></pre></li>
  <li><p>app.component.html:</p></li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Class size: {{ (class | async)?.numberOfStudent }}&lt;/h2&gt;
  &lt;ul&gt;
    &lt;li *ngFor="let i of students | async"&gt;
      {{i.key}} : {{i.value}}
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What happened:</p>
  
  <blockquote>
    <p>Class size: 10</p>
    
    <p>Tom :</p>
    
    <p>Mary :</p>
    
    <p>Peter : </p>
    
    <p>Laura :</p>
  </blockquote>
  
  <p>It doesn't return the value of list.</p>
  
  <p>Any suggestion is appreciated.</p>