Question

我正在处理的Angular4应用程序显示标题中当前正在播放的歌曲。这样做我在播放列表服务中使用firbase observable并将生成的“noePlaying”对象返回到OnInit的头部分，此时它被订阅并存储在该组件中。我在视图中显示结果，但即使它显示，我的控制台显示错误：无法读取undefined的属性'title'： TypeError：无法读取未定义的属性“title” - 错误指向我的标题组件中的OnInit函数。 - 当我使用play（）函数时会出现类似的错误，这会改变nowPlaying的歌曲 “用户回调抛出了异常.TypeError：无法读取未定义的属性'$ key'”

任何人都可以帮我解决这个问题吗？应用程序似乎运行正常，但错误表明我必须做一些不正确的事情。谢谢！以下是播放列表服务，标题组件TS和标题组件HTML的代码。

播放列表服务

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<firebase.User>;
  songs: FirebaseListObservable<any[]>;
  sizeSubject: Subject<any>;
  nowPlaying: FirebaseListObservable<Song>;
  np: any;
  npKey: any;


  constructor(private db: AngularFireDatabase, public afAuth: AngularFireAuth) {};


 getSongs(){

    this.songs = this.db.list('/songs', {
      query: {
        orderByChild: 'likes',  
      }
  }
    ).map((array) => array.reverse())  as FirebaseListObservable<Song[]>;


  return this.songs;
 }
  
  getNowPlaying(){

 this.nowPlaying = this.db.list('/songs', {
      query: {
        orderByChild: 'play',
        equalTo: 1
      }
  })  as FirebaseListObservable<Song>      

    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 });
}






}

管理组件HTML

<div class="tablediv">
<table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Artist</th>
        <th>Likes</th>
      </tr>
    </thead>
    <tbody>
  <tr *ngFor="let song of songs | filter: term ; let i  = index"

    [style.backgroundColor]="song.play == 1? 'skyblue' : 'transparent'"
  >

  <!--|  sortBy: 'likes'-->

<td >{{ song.title }}</td>
<td >{{ song.artist }}</td>
<td  [style.min-width]="'200px'" >{{ song.likes }}
 
            <i class="fa fa-play" [class.hidden]="song.play == 1" (click)="play(song.$key)" aria-hidden="true"></i>
          
   
    
</td>

  </tr>
  </tbody>
  </table>
</div>

管理组件TS

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<firebase.User>;
songs: any;
CurrentSongKey: any;
term: string = '';


  constructor(private plService: PlaylistService,
              public afAuth: AngularFireAuth) { 
                this.user = afAuth.authState;
              }

  ngOnInit() {
      this.plService.getSongs() .subscribe (songs => { 
     this.songs = songs;
        });   

        this.plService.getNowPlaying()
     .subscribe (nowPlaying => { 
     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);
}


  


}

谢谢！

AngularFire2错误'无法读取属性'

0 个答案: