属性';相册';不存在于类型';对象';上的角度
我正在使用Spotify API,而I0m在组件上以这种方式使用返回的json:
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'
我必须注释Erro行才能启动内置服务器
当然,该对象没有相册胶片,但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
}
}
解决方案
Property 'albums' does not exist on type 'Object'
此错误表示您正在尝试访问对象上的属性,而该对象可能不包含该属性。基本上,TypeScrip阻止您访问该属性,因为它不确定该属性是否存在。
正确的方法是为专辑创建一个接口,并列出要在该接口中访问的属性并使用该接口。
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);
});
}
最快、最麻烦的方法是将对象作为Any进行大小写,这将使其退出打字脚本类型检查
this.nuevasCanciones = (response as any).albums.items
相关文章