如何在 Angular 2 中读取 JSON #text

Posted 2023-03-13

【中文标题】如何在 Angular 2 中读取 JSON #text

【英文标题】：How to read in Angular 2 the JSON #text

【发布时间】：2017-11-12 02:25:49

【问题描述】：

抱歉，我无法在 Angular 2&4 中读取一个非常具体的 JSON 值，我可以在其中获取并显示列表的名称，但是！但我找不到在页面中显示的方法，例如在 JSON 文档中我所说的内容是这样的：（从 http://www.last.fm/api/show/artist.getTopAlbums 获得）并且我正在使用邮递员检查所有内容，我可以获得专辑的名称和其他东西，但是要获得#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" >
</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;
        // );

      
    )
  

【问题讨论】：

你试过src="list.image[0]['#text']"或者更好的[src]="list.image[0]['#text']"吗？

天哪，谢谢！！！！！！！！！！

【参考方案1】：

首先，如果你想得到image的第一个位置数组，你应该访问位置0（不是1）......你也没有text但是@ 987654323@:

要解决您的问题，您可以这样做：

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

甚至更好：

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