如何在Angular 2中读取JSON #text

时间:2017-06-10 00:54:05

标签: json angular angular2-forms

很抱歉,但我在Angular 2& 4中读取非常具体的JSON值时停滞不前,在那里我可以获取并显示列表的名称但是!但是我找不到在页面中显示的方法,例如我在JSON文档中谈到的内容:(从http://www.last.fm/api/show/artist.getTopAlbums获得)和我&m; m使用邮差检查所有内容,我可以获得相册的名称和其他东西,但要获得#text使用它的图像很奇怪

"topalbums": {
    "album": [
      {
        "name": "The Very Best of Cher",
        "playcount": 1663904,
        "mbid": "a7e2dad7-e733-4bee-9db1-b31e3183eaf5",
        "url": "https://www.last.fm/music/Cher/The+Very+Best+of+Cher",
        "artist": {
          "name": "Cher",
          "mbid": "bfcc6d75-a6a5-4bc6-8282-47aec8531818",
          "url": "https://www.last.fm/music/Cher"
        },
      **// +++++++++++++++++++THIS PART +++++++++++++++++++++!!!!!** 
        "image": [
          {
            // I'M TRYING TO USE THIS INFORMATION
            "#text": "https://lastfm-img2.akamaized.net/i/u/34s/287bc1657795451399d8fadf64555e91.png",
            "size": "small"
          },
          {
            "#text": "https://lastfm-img2.akamaized.net/i/u/64s/287bc1657795451399d8fadf64555e91.png",
            "size": "medium"
          },
          {
            "#text": "https://lastfm-img2.akamaized.net/i/u/174s/287bc1657795451399d8fadf64555e91.png",
            "size": "large"
          },
          {
            "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/287bc1657795451399d8fadf64555e91.png",
            "size": "extralarge"
          }
        ]
      },

我希望它能获得" url"在图像中,我试图以这种方式获得:

artist.component.html

<div *ngFor="let list of albumes">
  {{list.name}}
  <hr>
  <!-- Can't obtain the URL... -->
  <img src="{{list.image[1].text}}" alt="">
</div>

artist.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {MusicService} from "../../services/music.service";


@Component({
  selector: 'app-artist',
  templateUrl: './artist.component.html',
  providers: [MusicService]
})
export class ArtistComponent implements OnInit {

  constructor(private service: MusicService, private route: ActivatedRoute) { }

  albumes: any[];
  songs: any[];

  ngOnInit() {
    this.route.params.map(params => params['mbid']).subscribe(
      mbid => {
        // Top Album
        this.service.GetTopAlbumArtist(mbid).subscribe(topalbum => {
          this.albumes = topalbum.topalbums.album;
          console.log(topalbum.topalbums.image);
        });
        // Top Tracks
        // this.service.GetTopTracksArtist(mbid).subscribe(toptracks => {
        //   this.songs = toptracks;
        // });

      }
    )
  }
}

1 个答案:

答案 0 :(得分:1)

首先,如果你想获得image 数组的第一个位置,你应该访问位置0(而不是1)......你也没有{ {1}} text

要解决您的问题,您可以这样做:

#text

甚至更好

src="{{list.image[0]['#text']}}"