Блог

Здравствуйте, я создаю что-то похожее на приложение для музыкального проигрывателя. У меня настроена служба для сбора данных из файла 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"
          }
        }
      ]
    }
  ]
}
  

Песни.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 = resu<
            console.log('Songs: ', this.songs);
        });
    }

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

        this._songsService.getSongByName(songName).then(result => {
            this.activeSong = resu<
            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>
  

Вы могли бы использовать 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>