Angular 5，rxjs 映射到 json，'json' 不存在于类型 'object

Question

尝试关注在线视频，然后出现，我是 Angular 新手，其他解决方案对我没有帮助。

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

/*
  Generated class for the WeatherProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class WeatherProvider {
  apikey='7d2dc7a226a78c14';
  url;

  constructor(public http: HttpClient) {
    console.log('Hello WeatherProvider Provider');
    this.url='http://api.wunderground.com/api/'+this.apikey+'/conditions/q'
  }

    getWeather(city,state){
      return this.http.get(this.url+'/'+state+'/'+city+'.json')
        .map(res => res.json() );      
    }
}

Answer 1

如果您使用新的HttpClient，则无需解析 JSON，因为它会自动为您解码：

https://angular.io/guide/http#type-checking-the-response

HttpClient.get() 方法将 JSON 服务器响应解析为匿名 Object 类型。它不知道那个物体的形状是什么。

还有https://angular.io/guide/http#requesting-non-json-data。

Answer 2

使用 angular 5 和httpClient，您不再需要使用地图部分。

在此处阅读更多信息：https://angular.io/guide/http#type-checking-the-response

getWeather(city,state){
  return this.http.get(this.url+'/'+state+'/'+city+'.json');     
}

如果你想获取特定格式的数据，你可以告诉 HttpClient 响应的类型，以便更容易和更明显地消费输出。

export interface Config {
 heroesUrl: string;
 textfile: string;
}

然后：

getConfig() {
  // now returns an Observable of Config
  return this.http.get<Config>(this.configUrl);
}