我正在组件上通过返回的json使用Spotify api和I0m:
import { Component, OnInit } from '@angular/core';
import { SpotifyService } from "../../services/spotify.service";
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styles: []
})
export class HomeComponent implements OnInit {
nuevasCanciones:any[] = [];
constructor(private spotify:SpotifyService) { }
ngOnInit() {
this.spotify.getNewReleases()
.subscribe( response =>{
this.nuevasCanciones = response.albums.items;//here is the problem
console.log(this.nuevasCanciones);
});
}
}
尽管可以,但是出现以下错误:
Property 'albums' does not exist on type 'Object'
我必须注释错误行以启动内置服务器
当然,Object没有专辑胶片,但是json响应对象有它?如何解决?
这是我正在处理的回复
{
"albums": {
"href": "https://api.spotify.com/v1/browse/new-releases?offset=0&limit=2",
"items": [
{
"album_type": "album",
"artists": [
{
"external_urls": {
"spotify": "https://open.spotify.com/artist/50co4Is1HCEo8bhOyUWKpn"
},
"href": "https://api.spotify.com/v1/artists/50co4Is1HCEo8bhOyUWKpn",
"id": "50co4Is1HCEo8bhOyUWKpn",
"name": "Young Thug",
"type": "artist",
"uri": "spotify:artist:50co4Is1HCEo8bhOyUWKpn"
}
],
"available_markets": [
"AD",
"AE",
"AR",
"AT",
"AU",
"BE",
"BG",
"BH",
"BO",
"BR",
"CA",
"CH",
"CL",
"CO",
"CR",
"CY",
"CZ",
"DE",
"DK",
"DO",
"DZ",
"EC",
"EE",
"EG",
"ES",
"FI",
"FR",
"GB",
"GR",
"GT",
"HK",
"HN",
"HU",
"ID",
"IE",
"IL",
"IS",
"IT",
"JO",
"JP",
"KW",
"LB",
"LI",
"LT",
"LU",
"LV",
"MA",
"MC",
"MT",
"MX",
"MY",
"NI",
"NL",
"NO",
"NZ",
"OM",
"PA",
"PE",
"PH",
"PL",
"PS",
"PT",
"PY",
"QA",
"RO",
"SA",
"SE",
"SG",
"SK",
"SV",
"TH",
"TN",
"TR",
"TW",
"US",
"UY",
"VN",
"ZA"
],
"external_urls": {
"spotify": "https://open.spotify.com/album/1bnHPO4dKK7IjvgrtVBcQh"
},
"href": "https://api.spotify.com/v1/albums/1bnHPO4dKK7IjvgrtVBcQh",
"id": "1bnHPO4dKK7IjvgrtVBcQh",
"images": [
{
"height": 640,
"url": "https://i.scdn.co/image/fea776f1be78312cfbbe1d65751c6518945208f2",
"width": 640
},
{
"height": 300,
"url": "https://i.scdn.co/image/06c5475a23c13f3ab5d1472f7dd2220d50dbbfd8",
"width": 300
},
{
"height": 64,
"url": "https://i.scdn.co/image/b72ec3de9f343b878d0fb31969b715d2d1b8b4a7",
"width": 64
}
],
"name": "So Much Fun",
"release_date": "2019-08-16",
"release_date_precision": "day",
"total_tracks": 19,
"type": "album",
"uri": "spotify:album:1bnHPO4dKK7IjvgrtVBcQh"
},
{
"album_type": "album",
"artists": [
{
"external_urls": {
"spotify": "https://open.spotify.com/artist/6i392l38cR3uBPF0DbNs7S"
},
"href": "https://api.spotify.com/v1/artists/6i392l38cR3uBPF0DbNs7S",
"id": "6i392l38cR3uBPF0DbNs7S",
"name": "Quality Control",
"type": "artist",
"uri": "spotify:artist:6i392l38cR3uBPF0DbNs7S"
}
],
"available_markets": [
"AD",
"AE",
"AR",
"AT",
"AU",
"BE",
"BG",
"BH",
"BO",
"BR",
"CA",
"CH",
"CL",
"CO",
"CR",
"CY",
"CZ",
"DE",
"DK",
"DO",
"DZ",
"EC",
"EE",
"EG",
"ES",
"FI",
"FR",
"GB",
"GR",
"GT",
"HK",
"HN",
"HU",
"ID",
"IE",
"IL",
"IN",
"IS",
"IT",
"JO",
"JP",
"KW",
"LB",
"LI",
"LT",
"LU",
"LV",
"MA",
"MC",
"MT",
"MX",
"MY",
"NI",
"NL",
"NO",
"NZ",
"OM",
"PA",
"PE",
"PH",
"PL",
"PS",
"PT",
"PY",
"QA",
"RO",
"SA",
"SE",
"SG",
"SK",
"SV",
"TH",
"TN",
"TR",
"TW",
"US",
"UY",
"VN",
"ZA"
],
"external_urls": {
"spotify": "https://open.spotify.com/album/59zpaLOByFkJhc9D5Xqna9"
},
"href": "https://api.spotify.com/v1/albums/59zpaLOByFkJhc9D5Xqna9",
"id": "59zpaLOByFkJhc9D5Xqna9",
"images": [
{
"height": 640,
"url": "https://i.scdn.co/image/e5c720385207ff40d73432f45883f26f36653427",
"width": 640
},
{
"height": 300,
"url": "https://i.scdn.co/image/923b22c361911cd3a967753c164a39331ac31c02",
"width": 300
},
{
"height": 64,
"url": "https://i.scdn.co/image/4a606c762540dada9dafe74de6d88960209d34d6",
"width": 64
}
],
"name": "Quality Control: Control The Streets Volume 2",
"release_date": "2019-08-16",
"release_date_precision": "day",
"total_tracks": 36,
"type": "album",
"uri": "spotify:album:59zpaLOByFkJhc9D5Xqna9"
}
],
"limit": 2,
"next": "https://api.spotify.com/v1/browse/new-releases?offset=2&limit=2",
"offset": 0,
"previous": null,
"total": 100
}
}
答案 0 :(得分:1)
Property 'albums' does not exist on type 'Object'
此错误意味着您试图访问可能不包含该属性的对象上的属性,基本上打字稿会阻止您访问该属性,因为不确定该属性是否存在。
正确的方法是为相册创建一个接口,并列出要在该接口中访问并使用该接口的属性。
export interface Container {
albums: Albums;
}
export interface Albums {
href: string;
items: Item[];
limit: number;
next: string;
offset: number;
previous: null;
total: number;
}
export interface Item {
album_type: string;
artists: Artist[];
available_markets: string[];
external_urls: ExternalUrls;
href: string;
id: string;
images: Image[];
name: string;
release_date: Date;
release_date_precision: string;
total_tracks: number;
type: string;
uri: string;
}
export interface Artist {
external_urls: ExternalUrls;
href: string;
id: string;
name: string;
type: string;
uri: string;
}
export interface ExternalUrls {
spotify: string;
}
export interface Image {
height: number;
url: string;
width: number;
}
ngOnInit() {
this.spotify.getNewReleases()
.subscribe( (response: Container) =>{
this.nuevasCanciones = response.albums.items;//here is the problem
console.log(this.nuevasCanciones);
});
}
一种快速而肮脏的方法是将对象设置为任意类型,以使其不受打字稿类型检查的约束
this.nuevasCanciones = (response as any).albums.items