属性'相册'不存在于类型'对象'上的角度

2022-04-17 00:00:00 spotify javascript angular

我正在使用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

相关文章