Angular 2+：如何在TypeScript组件中解析单个JSON对象

嘿，我懂你的困扰啦！之前你处理的是嵌套了Temp数组的JSON结构，用数组的map方法提取数据完全没问题，但现在拿到的JSON是单个独立对象，没有数组包裹，这时候再用map就会报错啦——毕竟单个对象根本没有这个数组方法~

修改后的组件解析代码 #

直接访问对象的属性就可以了，不需要遍历数组：

ngOnInit() { 
  this._weather.dailyForecast() 
    .subscribe(mdata => { 
      // 直接提取单个对象的属性
      const currentTemp = mdata.temp;
      const currentTime = mdata.time;
      
      // 可以把值绑定到组件属性，方便模板使用
      // this.temperature = currentTemp;
      // this.currentTime = currentTime;
    });
}

进阶：用类型接口让代码更规范 #

为了让代码更健壮，避免属性名拼写错误，建议给返回的数据定义一个TypeScript接口：

// 在组件或单独的类型文件中定义
interface WeatherData {
  temp: number;
  time: string;
}

然后在你的WeatherService里指定返回的Observable类型：

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { WeatherData } from './path-to-your-interface';

export class WeatherService { 
  constructor(private http: HttpClient) {}

  dailyForecast(): Observable<WeatherData> {
    // 替换成你的实际API请求地址
    return this.http.get<WeatherData>('your-weather-api-url');
  }
}

这样在组件订阅时，IDE会给你属性的智能提示，代码也更易维护~

内容的提问来源于stack exchange，提问作者Easi Test