2017-05-27 112 views
0

嗨我是Angular的新手,並試圖創建一個使用Spotify API的應用程序。當我用我的搜索組件搜索卻什麼也沒有發生,我收到一條錯誤控制檯http請求上的角度ERR_CONNECTION_TIMED_OUT

GET https://api.spotfiy.com/v1/search?query=adf&offset=0&limit=20&type=artist&market=US網:: ERR_CONNECTION_TIMED_OUT

下面是該業務包含service.ts

import {Injectable} from '@angular/core'; 
import {Http, Headers} from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 

export class SpotifyService{ 

private searchUrl:string; 

constructor(private _http:Http){ 

} 

searchMusic(str:string, type="artist"){ 

this.searchUrl = `https://api.spotfiy.com/v1/search?query=${str}&offset=0&limit=20&type=${type}&market=US`; 
return this._http.get(this.searchUrl).map(res => res.json()); 

} 

} 

搜索組件

import { Component } from '@angular/core'; 
import {SpotifyService} from '../../services/spotify.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'search', 
    templateUrl: 'search.component.html', 
    //providers:[SpotifyService] 
}) 
export class SearchComponent{ 
    searchStr:string; 

    constructor(private _spotifyService:SpotifyService){ 

    } 

    searchMusic(){ 

    this._spotifyService.searchMusic(this.searchStr).subscribe(res => { 
     console.log(res.artist.items); 

     }) 
    } 

} 

app.module

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { RouterModule, Routes } from '@angular/router'; 
import { NavbarComponent } from './components/navbar/navbar.component'; 
import { AboutComponent } from './components/about/about.component'; 
import { SearchComponent } from './components/search/search.component'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { SpotifyService } from './services/spotify.service'; 

const routes: Routes = [ 
    { path: '', component: SearchComponent }, 
    { path: 'about', component: AboutComponent } 
] 

@NgModule({ 
    imports:  [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes) ], 
    declarations: [ AppComponent, AboutComponent, NavbarComponent, SearchComponent ], 
    providers: [ SpotifyService ], 
    bootstrap: [ AppComponent ], 

}) 
export class AppModule { } 

回答

0

您在URL中有拼寫錯誤。你意外地輸入了spotfiy而不是spotify。它發生了:)

+0

haha​​:| |從字面上花了幾個小時! – elleven