从角度2中的JSON对象获取嵌套数据

Question

你好我正在构建类似于音乐播放器应用程序的东西。我有一个服务设置抓取来自我在夹具中的JSON文件的数据。我可以用* ngFor获取所有顶级数据，但是一旦我开始询问诸如songs.parts.name之类的内容，就会显示未定义的内容。

我有* ngFor在页面上吐出顶级键值对，然后我希望能够点击特定的歌曲名称并让它过滤数据以找到正确的歌曲URL。

我该如何循环访问该数组并抓取这些对象？

任何帮助将不胜感激。

JSON

{ 
    "songs": [ 
    { 
     "name": "America The Beautiful", 
     "difficulty": "Medium", 
     "time": "3:38", 
     "hasPianoWords": true, 
     "hasPianoSolfa": false, 
     "hasTrackWords": false, 
     "parts": [ 
     { 
      "name": "Baritone", 
      "urls": { 
      "pianoWords": "http://www.taabc.org/check-off-songs/baritone/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "pianoSolfa": "http://www.taabc.org/check-off-songs/baritone/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "trackWords": "http://www.taabc.org/check-off-songs/baritone/america-the-beautiful/america-the-beautiful-piano-words.mp3" 
      } 
     }, 
     { 
      "name": "Bass", 
      "urls": { 
      "pianoWords": "http://www.taabc.org/check-off-songs/bass/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "pianoSolfa": "http://www.taabc.org/check-off-songs/bass/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "trackWords": "http://www.taabc.org/check-off-songs/bass/america-the-beautiful/america-the-beautiful-piano-words.mp3" 
      } 
     }, 
     { 
      "name": "Second Tenor", 
      "urls": { 
      "pianoWords": "http://www.taabc.org/check-off-songs/second-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "pianoSolfa": "http://www.taabc.org/check-off-songs/second-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "trackWords": "http://www.taabc.org/check-off-songs/second-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3" 
      } 
     }, 
     { 
      "name": "First Tenor", 
      "urls": { 
      "pianoWords": "http://www.taabc.org/check-off-songs/first-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "pianoSolfa": "http://www.taabc.org/check-off-songs/first-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3", 
      "trackWords": "http://www.taabc.org/check-off-songs/first-tenor/america-the-beautiful/america-the-beautiful-piano-words.mp3" 
      } 
     } 
     ] 
    } 
    ] 
} 

Songs.Service.ts

export class SongService { 
    constructor(private _http: Http) {} 

    getAllSongs() { 
     return this._http.get('/fixtures/songs.json') 
      .map((response: Response) => response.json().songs) 
      .toPromise() 
      .catch(this.handleError); 
    } 

    getSongByName(songName:string) { 
     return this._http.get('/fixtures/songs.json') 
      .map((response: Response) => _.find(response.json().songs, {'name': songName})) 
      .toPromise() 
      .catch(this.handleError); 
    } 

宋组件

export class SongsComponent { 
    public songs: any; 
    public activeSong: any; 
    public activeSongURL: any; 

    constructor(private _songsService: SongService, private router: Router, private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
     this._songsService.getAllSongs().then(result => { 
      this.songs = result; 
      console.log('Songs: ', this.songs); 
     }); 
    } 

    playSong(songName:string) { 
     console.log('clicked song:', songName) 

     this._songsService.getSongByName(songName).then(result => { 
      this.activeSong = result; 
      console.log('active song', this.activeSong); 
      this.activeSongURL = this.activeSong.baritone.pianoWords; 
      console.log(this.activeSongURL); 
     }) 
    } 

    selectSong(songName:string) { 
     this.router.navigate(['/song'], songName); 
    } 
} 

HTML模板

<section class="songs container"> 
    <div class="song col-md-3" *ngFor="let song of songs"> 
     <h4 (click)="selectSong(song.name)">{{song.name}}</h4> 
     <span>Difficulty: {{song.difficulty}}</span> 
     <span>Time: {{song.time}}</span> 
     <span><strong>Baritone</strong></span> 
     <span *ngIf="song.hasPianoSolfa" class="piano-solfa"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Solfa</span> 
     <span (click)="playSong(song.name)" *ngIf="song.hasPianoWords" class="piano-words"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Words</span> 
     <span (click)="playSong(song.name)" *ngIf="song.hasTrackWords" class="track-words"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Track Words</span> 
    </div> 
</section> 

<section class="audio-player"> 
    <audio src="{{activeSongURL}}" autoplay controls="controls"> 
     Your browser does not support the <code>audio</code> element. 
    </audio> 
</section> 

Answer 1

你可以利用Safe-Navigation-Operator

您似乎民政署，或已接近拥有它，它不应该是服用点像

<section class="songs container"> 
    <div class="song col-md-3" *ngFor="let song of songs"> 
     <h4 (click)="selectSong(song.name)">{{song.name}}</h4> 
     <span>Difficulty: {{song.difficulty}}</span> 
     <span>Time: {{song.time}}</span> 

     <div *ngIf="song?.parts.length > 0"> 

      <div *ngFor="let part of song?.parts"> 
       <strong>{{ part.name }}</strong> 
       <span class="piano-words" (click)="playSong(song.name)"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Words</span> 
       <span class="piano-solfa" (click)="playSong(song.name)"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Solfa</span> 
       <span class="track-words" (click)="playSong(song.name)"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Track Words</span> 
      </div> 

     </div> 

     <!-- <span><strong>Baritone</strong></span> 
     <span *ngIf="song.hasPianoSolfa" class="piano-solfa"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Solfa</span> 
     <span (click)="playSong(song.name)" *ngIf="song.hasPianoWords" class="piano-words"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Piano Words</span> 
     <span (click)="playSong(song.name)" *ngIf="song.hasTrackWords" class="track-words"><i class="fa fa-play-circle-o" aria-hidden="true"></i>Track Words</span> 
    </div> --> 
</section>