如何在angular中使用修改后的模型格式化我的数据

Question

你好，我应该将模型更改为下面的模型，但现在我的代码不起作用，我无法弄清楚如何使用提供的模型格式化数据。谢谢你的帮助。

api如下: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,rain,cloudcover,windspeed_10m,winddirection_10m,soil_temperature_0_to_7cm&timezone=Europe%2FLondon

在组件ngOnInit订阅中，我正在为来自api的每个数据数组制作变量(修改一些数组，如时间，降水和风向)，然后将新的WeatherDataItem对象与这些变量推送到空数组weatherData: WeatherDataItem[] =[]从中我正在填充html中的表列

weatherData: WeatherDataItem[] = [];
…
…
this.weatherService.getWeather()
...
...
.subscribe({
next: (historicalWeatherData) => {
const temperatures = historicalWeatherData.hourly.temperature_2m;
const times = historicalWeatherData.hourly.time.map((time) =>
this.datePipe.transform(time, 'shortTime')
);
const humidities = historicalWeatherData.hourly.relativehumidity_2m;
const windSpeeds = historicalWeatherData.hourly.windspeed_10m;
const airPressures = historicalWeatherData.hourly.surface_pressure;
const windDirections =
historicalWeatherData.hourly.winddirection_10m.map((item) =>
this.checkWindDirection(item)
);
const precipitations = historicalWeatherData.hourly.precipitation.map(
(item) => {
if (item > 0) {
return new Rain(item, true);
}
return new Rain(item, false);
}
);
const cloudcover = historicalWeatherData.hourly.cloudcover;
const soilTemperatures =
historicalWeatherData.hourly.soil_temperature_0_to_7cm;
temperatures.forEach((value, i) => {
this.weatherData.push(
new WeatherDataItem(
value,
times[i],
humidities[i],
windSpeeds[i],
airPressures[i],
windDirections[i],
precipitations[i],
cloudcover[i],
soilTemperatures[i]
)
);
});
...
...
...

这是我现在为weatherData使用的模型

export class WeatherDataItem {
constructor(
public temperature: string,
public time: string,
public humidity: string,
public wind: string,
public pressure: string,
public direction: string,
public precipitation: Rain,
public cloudcover: string,
public soilTemperature: string
) {}
}

，我应该使用这个模型，因为上面的一个显然有太多的参数在构造函数，但不知道如何实现，因为现在在组件我得到错误:期望1个参数，但得到9

export class WeatherDataItem {
temperature: number;
time: string;
humidity: number;
wind: number;
pressure: number;
direction: string;
precipitation: Rain;
cloudcover: number;
soilTemperature: number;
constructor(inputData: Object)  // type WeatherDataItem ? or what should be the type here
{
(this.temperature = inputData.temperature),
(this.time = inputData.time),
(this.humidity = inputData.humidity),
(this.wind = inputData.wind),
(this.pressure = inputData.pressure),
(this.direction = inputData.direction),
(this.precipitation = inputData.precipitation),
(this.cloudcover = inputData.cloudcover),
(this.soilTemperature = inputData.soilTemperature);
}
}

我尝试了这个组件，但没有运气

const inputData = [
temperatures,
times,
humidities,
windSpeeds,
airPressures,
windDirections,
precipitations,
cloudcover,
soilTemperatures,
];
this.weatherData.push(new WeatherDataItem(inputData));

html

<p-table
[value]="weatherData"
...
...
...
<ng-template pTemplate="body" let-weather>
<tr>
<td field="time">{{weather.time}}</td>
<td field="temperature">{{weather.temperature}}&deg;C</td>
<td field="humidity">{{weather.humidity}}%</td>
<td field="wind">{{weather.wind}} km/h</td>
<td field="pressure">{{weather.pressure}} hPa</td>
<td field="direction">{{weather.direction}}</td>
<td field="precipitation.didRain">{{weather.precipitation.amount}} mm</td>
<td field="cloudcover">{{weather.cloudcover}}%</td>
<td field="soilTemperature">{{weather.soilTemperature}}&deg;C</td>
</tr>
</ng-template>

Answer 1

当我添加它时它可以工作，也许你在某个地方打错了。在OnInit函数中创建新的WeatherDataItem时，我必须将映射添加到字符串

https://stackblitz.com/edit/angular-ivy-qchu4z