第一次学习Angular 和 typescript ,不能理解为什么我会得到这个错误,以及如何修复它
我正在尝试使用ngFor在表中显示特定日期的历史天气数据
我正在使用PrimeNG组件
<div class="card" *ngIf="myWeather">
<h5>London Historical Weather Data 12.05.2005</h5>
<p-table [scrollable]="true" scrollHeight="400px" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th>Time</th>
<th>Temperature</th>
<th>Description</th>
<th>Air Pressure</th>
<th>Humidity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" *ngFor="let weather of myWeather" > // error is here
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</ng-template>
</p-table>
</div>
weather.service.ts
getWeatherData(): Observable<Weather> {
return this.http.get<Weather>(
'https://archive-api.open-meteo.com/v1/era5?latitude=51.51&longitude=-0.13&start_date=2005-08-25&end_date=2005-08-25&hourly=temperature_2m,relativehumidity_2m,dewpoint_2m,apparent_temperature,surface_pressure,precipitation,windspeed_10m&timezone=Europe%2FLondon',
{
params: new HttpParams(),
}
);
}
}
该API返回它正在其中使用对象组件
@Component({
selector: 'app-weather',
templateUrl: './weather.component.html',
styleUrls: ['./weather.component.css'],
})
export class WeatherComponent implements OnInit {
myWeather!: Weather;
constructor(private weatherService: WeatherService) {}
ngOnInit(): void {
this.weatherService.getWeatherData().subscribe((response) => {
console.log(response);
this.myWeather = response;
});
}
}
类型'Weather'不能赋给类型'NgIterable|零值|未定义“. ngtsc(2322)天气.组件.ts(5,11):组件WeatherComponent的模板出错。
我试过了
myWeather?: Weather[]
不起作用
这是我从api json格式化的模型
export interface Weather {
latitude: number;
longitude: number;
generationtime_ms: number;
utc_offset_seconds: number;
timezone: string;
timezone_abbreviation: string;
elevation: number;
hourly_units: HourlyUnits;
hourly: Hourly;
}
export interface HourlyUnits {
time: string;
temperature_2m: string;
relativehumidity_2m: string;
dewpoint_2m: string;
apparent_temperature: string;
surface_pressure: string;
precipitation: string;
windspeed_10m: string;
}
export interface Hourly {
time: string[];
temperature_2m: number[];
relativehumidity_2m: number[];
dewpoint_2m: number[];
apparent_temperature: number[];
surface_pressure: number[];
precipitation: number[];
windspeed_10m: number[];
}
1条答案
按热度按时间nmpmafwu1#
我认为错误信息非常清楚。
*ngFor
正在对数组(或任何可迭代对象)进行迭代。由于myWeather
是一个对象,而不是可迭代对象,因此会抛出错误。你应该决定你到底想要迭代什么。你唯一拥有的数组包含在类型
Hourly
中,所以我假设你想要迭代这些数组。您可以使用
*ngFor="let time of myWeather.hourly.time"
来执行此操作。请注意,typescript无法确保您的实际API响应在运行时与您定义的myWeather类型匹配。您必须手动检查您定义的类型是否与实际API响应匹配。