问题描述
并且我想获得作为我的界面的确切属性:
export interface citySearch
{
Key:String,LocalizeName:String,Country:{
LocalizeName:String
}
}
服务
import {citySearch} from '../interfaces/citySearch.model'
export class WeatherService {
constructor(public http: HttpClient) { }
getLocation(query:String):Observable<citySearch>{
return this.http.get<citySearch>(`http://dataservice.accuweather.com/locations/v1/cities/autocomplete?apikey=${this.apikey}&q=${query}&language=en-us`)
.pipe(
map((receivedData:citySearch)=>{
return receivedData
}
))
}
}
Component.ts
export class TestComponent implements OnInit {
citySearch!: citySearch;
constructor(public weatherService:WeatherService) { }
ngOnInit(): void {
this.weatherService.getLocation("tel aviv").subscribe((data:citySearch)=>{
this.citySearch = data
console.log("this.citySearch:",this.citySearch);
})
}
}
谢谢!
解决方法
import {citySearch} from '../interfaces/citySearch.model'
export class WeatherService {
constructor(public http: HttpClient) { }
getLocation(query:String):Observable<citySearch>{
return this.http.get<citySearch>(`http://dataservice.accuweather.com/locations/v1/cities/autocomplete?apikey=${this.apikey}&q=${query}&language=en-us`)
.pipe(
map(items => items.map({Key,LocalizeName,Country }:citySearch) => {
return {Key,Country: {LocalizeName: Country. LocalizedName}};
}
)))
}
}
在你的 map 函数中你可以映射每个项目,记住来自 rx/js 的 map fn 与 javascript Array.map 不同
阅读更多关于 rxjs.map
https://www.learnrxjs.io/learn-rxjs/operators/transformation/map