该项目将使用天气 API。我使用 openapi-generator-cli 来生成 typescript api 客户端代码。
生成的服务类
/**
* This method retrieves weather forecast
* @param authorization Auth Token
* @param transactionId Transaction Id
* @param airportCode Airport Code
* @param forecastInterval forecastInterval
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
public getForecastUsingGET(authorization: string, transactionId: string, airportCode: Array<string>, forecastInterval?: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<WeatherForecastResp>;
public getForecastUsingGET(authorization: string, transactionId: string, airportCode: Array<string>, forecastInterval?: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<HttpResponse<WeatherForecastResp>>;
public getForecastUsingGET(authorization: string, transactionId: string, airportCode: Array<string>, forecastInterval?: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<HttpEvent<WeatherForecastResp>>;
public getForecastUsingGET(authorization: string, transactionId: string, airportCode: Array<string>, forecastInterval?: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json'}): Observable<any> {
......
return this.httpClient.get<WeatherForecastResp>(`${this.configuration.basePath}/forecasts`,
{
params: queryParameters,
responseType: <any>responseType,
withCredentials: this.configuration.withCredentials,
headers: headers,
observe: observe,
reportProgress: reportProgress
}
);
}
模型类
export interface WeatherForecastResp {
weatherForecasts?: Array<WeatherForecast>;
}
export interface WeatherForecast {
forecastInterval?: Forecasts;
}
export interface Forecasts {
metadata?: Metadata;
forecasts?: Array<Forecast>;
}
export interface Forecast {
cityName?: string;
countryCode?: string;
dayNum?: string;
highTemperatureC?: string;
highTemperatureF?: string;
locationId?: string;
lowTemperatureC?: string;
lowTemperatureF?: string;
......
}
然后当我调用 API 服务时，我可以看到根数据对象，但是当我尝试调用子对象时，它返回 undefined。
export class AppComponent implements OnInit{
title = 'angular-weather-widget';
constructor(private forecastService: ForecastService) {}
ngOnInit(): void {
this.forecastService.getForecastUsingGET("","",["ATL"]).subscribe(
body => {
//this.fieldStr = body.weatherForecasts?.[0].forecastInterval?.forecasts?.[0].dayNum;
console.log(typeof(body));
console.log("body: " + JSON.stringify(body));
console.log("WeatherForecast: " + body.weatherForecasts?.length); // value is undefined
},
err => {
console.log("Error caught at Subscriber " + err)
},
() => {
console.log("Processing Complete. " )
}
);
}
}
问题
- 如何访问 Forecast（3 级嵌套）中的数据并在 html 中显示？我尝试使用'？和 '！' 如
body.weatherForecasts?.[0].forecastInterval?.forecasts?.[0].dayNum!但总是undefined回来。
提前致谢。