title: AngularFire2 error 'Cannot read property'
body: <p>the Angular4 app I'm working on displays the currently playing song in the header. to do so I'm using a firbase observable in a playlist service and returning the resulting "noePlaying" object to the header component at OnInit, at which point it is subscribed to and stored in that component. I'm displaying the result in the view, but even though it's showing, my console shows an error:
  Cannot read property 'title' of undefined:
  TypeError: Cannot read property 'title' of undefined 
  -the error points to the OnInit function in my header component. 
  -I get a similar error when I use the play() function, which changes the nowPlaying song
  "Exception was thrown by user callback. TypeError: Cannot read property '$key' of undefined"</p>
  
  <p>Can anyone please help me figure this out? The app seems to functioning as should but the errors indicate that I must be doing something improperly. Thank you! Below is the code for the Playlist service, the Header Component TS, and the Header Component HTML.</p>
  
  <p>Playlist Service</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {  Injectable} from '@angular/core';
  import { Song } from './song.model';
  
  import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
  
  import { Subject } from 'rxjs/Subject';
  import {Observable} from 'rxjs/Rx';
  import 'rxjs/Rx';
  
  import * as firebase from 'firebase/app';
  
  @Injectable()
  export class PlaylistService {
  
  user: Observable&lt;firebase.User&gt;;
    songs: FirebaseListObservable&lt;any[]&gt;;
    sizeSubject: Subject&lt;any&gt;;
    nowPlaying: FirebaseListObservable&lt;Song&gt;;
    np: any;
    npKey: any;
  
  
    constructor(private db: AngularFireDatabase, public afAuth: AngularFireAuth) {};
  
  
   getSongs(){
  
      this.songs = this.db.list('/songs', {
        query: {
          orderByChild: 'likes',  
        }
    }
      ).map((array) =&gt; array.reverse())  as FirebaseListObservable&lt;Song[]&gt;;
  
  
    return this.songs;
   }
    
    getNowPlaying(){
  
   this.nowPlaying = this.db.list('/songs', {
        query: {
          orderByChild: 'play',
          equalTo: 1
        }
    })  as FirebaseListObservable&lt;Song&gt;      
  
      return this.nowPlaying;
    }
   
  
  
  play(nextSongKey, currentSongKey){
  
    this.songs.update(currentSongKey,{ play: 0 });
    this.songs.update(nextSongKey,{ play: 1 });
      // console.log(typeof nextSongKey);
      // console.log( typeof currentSongKey);
  
  }
  
  stop(id){
    this.songs.update(id,{ play: 0 });
  }
  
  
  
  
  
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Admin Component HTML</p>
  
  <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;div class="tablediv"&gt;
  &lt;table class="table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Title&lt;/th&gt;
          &lt;th&gt;Artist&lt;/th&gt;
          &lt;th&gt;Likes&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
    &lt;tr *ngFor="let song of songs | filter: term ; let i  = index"
  
      [style.backgroundColor]="song.play == 1? 'skyblue' : 'transparent'"
    &gt;
  
    &lt;!--|  sortBy: 'likes'--&gt;
  
  &lt;td &gt;{{ song.title }}&lt;/td&gt;
  &lt;td &gt;{{ song.artist }}&lt;/td&gt;
  &lt;td  [style.min-width]="'200px'" &gt;{{ song.likes }}
   
              &lt;i class="fa fa-play" [class.hidden]="song.play == 1" (click)="play(song.$key)" aria-hidden="true"&gt;&lt;/i&gt;
            
     
      
  &lt;/td&gt;
  
    &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Admin Component TS</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
  import { AngularFireAuthModule,AngularFireAuth} from 'angularfire2/auth';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { Subject } from 'rxjs/Subject';
  import {Observable} from 'rxjs/Rx';
  
  import * as firebase from 'firebase/app';
  import { PlaylistService } from '../playlist.service'
  
  @Component({
    selector: 'app-admin',
    templateUrl: './admin.component.html',
    styleUrls: ['./admin.component.css']
  })
  export class AdminComponent implements OnInit {
  
  user: Observable&lt;firebase.User&gt;;
  songs: any;
  CurrentSongKey: any;
  term: string = '';
  
  
    constructor(private plService: PlaylistService,
                public afAuth: AngularFireAuth) { 
                  this.user = afAuth.authState;
                }
  
    ngOnInit() {
        this.plService.getSongs() .subscribe (songs =&gt; { 
       this.songs = songs;
          });   
  
          this.plService.getNowPlaying()
       .subscribe (nowPlaying =&gt; { 
       this.CurrentSongKey = nowPlaying[0]['$key'];
       console.log(this.CurrentSongKey)
          });
  
    }
  
  
  
  
  removeLike(id: string, likes: number): void {
   this.plService.removeLike(id, likes);
  }
  
  play(id) {
    this.plService.play(id, this.CurrentSongKey);
   
  }
  stop(id){
    this.plService.stop(id);
  }
  
  
    
  
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you!</p>