因此,我正在研究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>
答案 0 :(得分:0)
您的错误非常简单,您正在尝试迭代字符串。
使用switchMap时,您可以在管道中使用 catchError 处理错误,如下所示:
getArtists(query: string) {
return this.searchMusic(`search?q=${query}&type=artist&limit=15`).pipe(
switchMap(data => data["artists"].items),
catchError(_ => of("Error!"))
);
}
但是,您需要在订阅时再次处理它。因此,建议您让您的 getArtists 保持原样,并处理如下的subscription方法中的错误:
this.spotifyService.getArtists('eeqw')
.subscribe((data: any) => {
console.log(data);
}, (error: any) => {
alert('Not found' + error);
});