從角度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>