Question

所以，基本上，我试图在JSON文件中添加每个艺术家的所有专辑，包括嵌套专辑（我特别困难），在我的一个名为albums的数组中AlbumComponent。

我想弄清楚和学习的整体解决方案是专门将每个专辑添加到一个数组中，以便我可以创建一个Albums组件。此页面显示每张专辑，并且不与其他相同艺术家的专辑配对。这样我就可以按字母顺序组织它们等等。

希望我对这个问题有正确的思考过程！

无论如何，这是代码：

这是服务提供的数据，并被注入组件（和其他组件）。请注意，艺术家'Flume'有两张专辑，其他专辑只有一张（目前为止）。

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {

  constructor() { }

  data = {
    "artists": [
      {
        "artistName": "Lupe Fiasco",
        "artistsPicture": "../assets/artists-images/lupe.jpg",
        "genre": "Hip-Hop",
        "albums": [
          { "name": "Food & Liquor",
            "albumCover": "../assets/album-covers/f&l.jpg",
            "songs": {
              "name": "Kick, Push",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "Flume",
        "artistsPicture": "../assets/artists-images/flume.jpg",
        "genre": "",
        "albums": [
          { "name": "Flume",
            "albumCover": "../assets/album-covers/flume.jpg",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          },
          { "name": "Skin",
            "albumCover": "../assets/album-covers/skin.png",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "Linkin Park",
        "artistsPicture": "../assets/artists-images/linkinpark.jpg",
        "genre": "",
        "albums": [
          { "name": "Hybrid Theory",
            "albumCover": "../assets/album-covers/meteora.jpg",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "Drake",
        "artistsPicture": "../assets/artists-images/drake.jpg",
        "genre": "",
        "albums": [
          { "name": "Views",
            "albumCover": "../assets/album-covers/views.png",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "J.Cole",
        "artistsPicture": "../assets/artists-images/jcole.jpg",
        "genre": "",
        "albums": [
          { "name": "2014 Forest Hills Drive",
            "albumCover": "../assets/album-covers/fhd.jpg",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "Eminem",
        "artistsPicture": "../assets/artists-images/eminem.jpg",
        "genre": "",
        "albums": [
          { "name": "Marshal Matthers LP",
            "albumCover": "../assets/album-covers/mmlp.jpg",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
    ]
  }


}

组件HTML 。这是启发这个问题的部分。当我像这样循环时，两个'Flume'专辑在UI中耦合在一起。 NoooOOooOOOOooOOO

因此它可以显示每个专辑封面，但无法将它们与来自同一艺术家的其他专辑分开。

<div *ngFor='let x of artistData.artists'>
  <img *ngFor='let x of x.albums' src="{{x.albumCover}}" alt="">
</div>

因此，在我在UI中显示之前，我的解决方案是尝试在组件中对此进行排序。这是组件：

import { Component, OnInit } from '@angular/core';
import { DataService } from './../../data.service';

@Component({
  selector: 'app-albums',
  templateUrl: './albums.component.html',
  styleUrls: ['./albums.component.css']
})
export class AlbumsComponent implements OnInit {

  constructor(private dataService: DataService) { }

  artistData = this.dataService.data;

  albums: any[] = [];


  ngOnInit() {
    console.log(this.albums);

  }

}

Answer 1

您需要将各个相册展平成一个数组，而不是艺术家对象内的嵌套数组。我可以使用Array.prototype.reduce()。

添加到组件逻辑

const flatAlbums = data.artists.reduce((acc, next) => {
  next.albums.forEach(album => {
    acc.push(album);
  });
  return acc;
}, []);

console.log(flatAlbums)的结果：

[ { name: 'Food & Liquor',
    albumCover: '../assets/album-covers/f&l.jpg',
    songs: { name: 'Kick, Push', file: 'mp3' } },
  { name: 'Flume',
    albumCover: '../assets/album-covers/flume.jpg',
    songs: { name: 'Sleepless', file: 'mp3' } },
  { name: 'Skin',
    albumCover: '../assets/album-covers/skin.png',
    songs: { name: 'Sleepless', file: 'mp3' } },
  { name: 'Hybrid Theory',
    albumCover: '../assets/album-covers/meteora.jpg',
    songs: { name: 'Sleepless', file: 'mp3' } },
  { name: 'Views',
    albumCover: '../assets/album-covers/views.png',
    songs: { name: 'Sleepless', file: 'mp3' } },
  { name: '2014 Forest Hills Drive',
    albumCover: '../assets/album-covers/fhd.jpg',
    songs: { name: 'Sleepless', file: 'mp3' } },
  { name: 'Marshal Matthers LP',
    albumCover: '../assets/album-covers/mmlp.jpg',
    songs: { name: 'Sleepless', file: 'mp3' } } ]

修改组件HTML

仅迭代新的flatAlbums数组。

<div *ngFor='let x of flatAlbums'>
  <img src="{{x.albumCover}}" alt="">
</div>

将数据从JSON

1 个答案: