How to read in Angular 2 the JSON #text - json

Question

Sorry, but I'm stagnant to read a very specific JSON value in Angular 2&4, where I can obtain and showing the name of the list BUT! but I can't find a way to show in the page, what I'm talking about for example in the JSON document I have this way: (obtained from http://www.last.fm/api/show/artist.getTopAlbums ) and I'm using the Postman to check all the contents, I can obtain the name of the Album and other things, BUT to obtain the #text to use the image it's weird
"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"
}
]
},
What I want it's to obtain the "url" of the image, I try to obtain in this way:
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;
// });
}
)
}
}

Answer 1

First, if you want to get the first position of image array, you should access the position 0 (not 1)... also you don't have text but #text:
To solve your problem you can do this way:
src="{{list.image[0]['#text']}}"
or even better:
[src]="list.image[0]['#text']"