Ошибка при попытке различить '...'. Разрешены только массивы и итерации. (С помощью switchMap) - PullRequest
Новая
       40

Ошибка при попытке различить '...'. Разрешены только массивы и итерации. (С помощью switchMap)

0 голосов
/ 30 апреля 2019

Итак, я изучаю Angular и работаю над проектом с Spotify API. Когда я ищу музыку, я получаю эту ошибку (Ошибка при попытке различить 'A $ AP Twelvyy'. Допускаются только массивы и итерации). Я хочу использовать switchMap, так как событие запускается с keyup.

Это услуга 


export class SpotifyService{

    constructor(private _http: HttpClient){

    }

    searchMusic(query: string){
      debugger;
      const searchUrl=`https://api.spotify.com/v1/${query}`;



      const headers=new HttpHeaders({
        Authorization:
        "Bearer XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx"
      });

      return this._http.get(searchUrl, {headers});

    }


          getArtists(query: string) {
            debugger
            return this.searchMusic(`search?q=${query}&type=artist&limit=15`).pipe(
              switchMap(data => data["artists"].items)
            );
          }
}

Это поисковая составляющая 

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


@Component({
    selector: 'app-searchbar',
    templateUrl: './searchbar.component.html',
    styleUrls: ['./searchbar.component.scss'],
    providers: [SpotifyService]
})

export class SearchBarComponent {
    searchString: string;
    results: string[];
    artists: any[]=[];
    loading: boolean;
    tracks: any []=[];
    constructor(private _spotifyService:SpotifyService){
    }



          search(query){
            console.log(query);
            this._spotifyService.getArtists( query )
                  .subscribe( (data: any) => {
                    this.artists = data;
                    console.log(this.artists);
                  });
          }

}

Это шаблон 

<div class="container">
  <input #query id="inputbar" type="text" (keyup)="search(query.value)" class="form-control" placeholder="Search...">
  <div class="search"></div>
</div>

1 Ответ

0 голосов
/ 30 апреля 2019

Ваша ошибка довольно проста, вы пытаетесь перебрать строку.

Когда вы используете switchMap, вы можете обрабатывать ошибки, используя catchError внутри pipe , например: 

getArtists(query: string) {
  return this.searchMusic(`search?q=${query}&type=artist&limit=15`).pipe(
    switchMap(data => data["artists"].items),
    catchError(_ => of("Error!"))
  );
}

Тем не менее, вам нужно будет обработать его снова при подписке. Поэтому я предлагаю вам оставить ваши getArtists без изменений и обработать ошибку в методе подписки следующим образом: 

  this.spotifyService.getArtists('eeqw')
    .subscribe((data: any) => {
      console.log(data);
    }, (error: any) => {
      alert('Not found' + error);
  });
...