0

我正在尝试在下面的代码中使用 Angular 2 中的 Observables 从 spotify api 获取数据。

我想订阅 input valuechanges 事件，该事件又发送一个请求以使用输入的搜索词进行 spotify。

我是 Observables 的新手，真的很难处理整个嵌套回调/observables 的事情。如果有人能提供关于我如何正确订阅输入框并在用户键入时显示 spotify 结果的代码，我将不胜感激。

@Component({
  selector: 'spotify-search',
  template: `
    <h1>Spotify Search</h1>
    <input 
        class="form-control"
      [formControl]="searchBox" 
      placeholder="Search Spotify artist" />

    <div *ngFor=" let artists of results | async"> 
        {{ artists.name }} -- Followers {{artists.followers.total}} -- Popularity {{ artists.popularity }}        
    </div>
  `
})
export class SpotifySearchComponent {

  private searchBox = new FormControl();

  constructor(private _http: Http){

  }

  ngAfterViewInit() {  
    var keyups = this.searchBox
        .valueChanges
        .debounceTime(200)
        .map(searchTerm => {
            return this.getResults(searchTerm);           
        });

    var subscription = keyups.subscribe(res => console.log(res));       
  }

  getResults(searchTerm){           
    return this._http.get('https://api.spotify.com/v1/search?q=' + searchTerm + '&type=artist')
      .map(response => {
            response.json();                                    
      }, error => console.log('Could not load artists'));            
  }  
}
4

1 回答 1

0

我认为在您的代码中您错过了接口“AfterViewInit”的实现

export class SpotifySearchComponent implements AfterViewInit {...
于 2016-10-27T15:53:40.957 回答