0

以下のコードで、Angular 2 の Observables を使用して Spotify API からデータを取得しようとしています。

入力された検索語で spotify へのリクエストを送信する input valuechanges イベントを購読したいと思います。

私は 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 に答える