Невозможно прочитать свойство 'temp' из undefined в HTML,

Question

Как я могу решить это?

Мои JSON данные, поступающие из API, вызывают эту ошибку:

ОШИБКА в src / app / weather / weather.component.ts (39,30): ошибка TS2339 : Свойство 'main' не существует для типа 'Iweather []'

JSON:

{
  "main": {
    "temp": 28,
    "feels_like": 32.95,
    "temp_min": 28,
    "temp_max": 28,
    "pressure": 1008,
    "humidity": 78
  }    
}

Мне не удалось использовать данные JSON в HTML .

Мой интерфейс:

    export interface IWeather {
        name : string;
        main: any[];
    }

Мои services.ts:

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Observable, Subject } from 'rxjs';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/catch';
    import { Iweather } from './Data-Interface';


    @Injectable({
      providedIn: 'root'
    })
    export class WeatherServiceService {

      constructor( private http : HttpClient) { }

      getRequest(val) : Observable<Iweather[]>{
        let APP_ID ="myAPICode";
        let cityName = val;
        let url ='https://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&units=metric&appid=' + APP_ID;
         return this.http.get<Iweather[]>(url);
      }
    }

Моя составная часть:

      import { Component, OnInit } from '@angular/core';
      import { WeatherServiceService } from '../weather-service.service';
      import { Iweather } from '../Data-Interface';
      import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
      @Component({
        selector: 'app-weather',
        templateUrl: './weather.component.html',
        styleUrls: ['./weather.component.css']
      })
      export class WeatherComponent implements OnInit {

        options: FormGroup;
        floatLabelControl = new FormControl('auto');
        constructor(private WeatherService : WeatherServiceService , fb: FormBuilder) { 
          this.options = fb.group({
            floatLabel: this.floatLabelControl
          });
        }

        public weatherData : Iweather[] = [];

        ngOnInit() {}

        public cityName ="";
        public Status = "true";
        public humidity = "";
        public pressure = "";
        public wind_speed = "";
        public weather = "";
        public temp :string;

        getWeatherReport(value) {
          this.Status = 'false';
          this.cityName =value;
          this.WeatherService.getRequest(this.cityName)
          .subscribe((data : Iweather[]) => {
            this.temp = data.main.temp;
            this.humidity = data.main.humidity;
            this.pressure = data.main.pressure;
            this.weatherData = data;
          }); 
        }
      }

Мой HTML:

       {{ weatherData.name }}

Answer 1

есть два варианта решения:

1) замените this.temp = data.main на this.temp = data ["main"] или

2) создайте интерфейс :

export interface Iweather {
    main: {
    temp: number,
    feels_like: number,
    temp_min: number,
    temp_max: number,
    pressure: number,
    humidity: number
        }
    };

Answer 2

Проблема в том, что в вашем интерфейсе свойство main является массивом. Но в ответе API это объект, а не массив. Вы можете создать объект модели (скажем, MyData.model.ts) для основного объекта, а затем использовать его в интерфейсе в качестве основного: MyData []; Если вы уверены, что только один объект main возвращается из ответа API, вы можете использовать index [0] в коде для его извлечения или использовать foreach l oop.

Answer 3

Ваша переменная data является массивом интерфейса Iweather, вы пытаетесь получить свойство main непосредственно из массива в вашем методе подписки. Вам нужно l oop через его элементы с foreach или использовать заданный c индекс, такой как data[0], чтобы получить основное свойство.

.subscribe((data : Iweather[]) => {
        //since you need single day you don't need to loop
        this.temp = data[0].main.temp; 
        this.humidity = data[0].main.humidity;
        this.pressure = data[0].main.pressure;
        //Here you declatred weatherData as IWeather[] array so i'm not changing that.
        this.weatherData = data;
      }); 

Редактировать: Я редактировал кодовый блок выше. Поскольку вы получаете и также нуждаетесь в однодневном колесе, вам не нужно использовать l oop до data. Вам нужно только получить свойство main первого IWeather элемента.