🎙️ Finished up the logic for ArtistsComponent.

This commit is contained in:
corner 2019-09-29 16:13:17 +02:00
parent 2168577c6d
commit 36f90fb22f
2 changed files with 21 additions and 10 deletions

View File

@ -10,16 +10,23 @@
<ng-template #artistInfo>
<div *ngIf="artistData" class="container">
<h2>{{ artistData.name }}'s profile</h2>
<hr>
<h4>{{ artistData.name }}'s songs</h4>
<h4>{{ artistData.name }}'s albums</h4>
<ul>
<li *ngFor="let song of songs">
{{ song.name }}
<li *ngFor="let album of albums">
<a [routerLink]="'/albums/' + album.id">{{ album.name }}</a>
</li>
</ul>
<h4>{{ artistData.name }}'s songs</h4>
<app-songlist *ngIf="songs" [songs]="songs"></app-songlist>
</div>
</ng-template>

View File

@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiService } from 'src/app/services/api.service';
import { Artist, Song } from '../../classes/entities';
import { Artist, Song, Album } from '../../classes/entities';
@Component({
selector: 'app-artists',
@ -13,6 +13,7 @@ export class ArtistsComponent implements OnInit {
artistData: Artist;
artists: Promise<Array<Artist>>;
songs: Array<Song>;
albums: Array<Album>;
constructor(
private api: ApiService,
@ -29,7 +30,10 @@ export class ArtistsComponent implements OnInit {
// ... then get artist data ...
this.api.getArtist(Number(params.get('id'))).then(async res => {
this.artistData = res;
this.songs = await this.api.getSong(res.songs.join());
const songs = await this.api.getSong(res.songs.join());
this.songs = songs.length ? songs : [songs];
const albums = await this.api.getAlbum(res.albums.join());
this.albums = albums.length ? albums : [albums];
});
} else {