typescript 类型“Object”不能赋给类型“NgIterable< any>|零值|未定义'.在Angular 中

6gpjuf90  于 2022-11-26  发布在  TypeScript
关注(0)|答案(1)|浏览(100)

第一次学习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[];
}
nmpmafwu

nmpmafwu1#

我认为错误信息非常清楚。*ngFor正在对数组(或任何可迭代对象)进行迭代。由于myWeather是一个对象,而不是可迭代对象,因此会抛出错误。
你应该决定你到底想要迭代什么。你唯一拥有的数组包含在类型Hourly中,所以我假设你想要迭代这些数组。
您可以使用*ngFor="let time of myWeather.hourly.time"来执行此操作。
请注意,typescript无法确保您的实际API响应在运行时与您定义的myWeather类型匹配。您必须手动检查您定义的类型是否与实际API响应匹配。

相关问题