Question

我有一个JSON对象（如下图所示），将其放入名为“ eval”的数组中。

在Angular中，我通过以下方式引用此数据：

this.eval.list[0].main.temp

Main和temp都是数组中的字段：

我收到一个编译错误，指出“天气[]类型上不存在“属性”列表”

我在做什么错了？

天气代码在这里：

export class Weather {
  cod: {
    city: {
    id: number,
    name: string
  };
  list: {
    main: {
      humidity: number,
      temp: number,
    }
  };
}

  constructor(i?: number, n?: string, h?: number, t?: number) {
    this.cod.city.id = i;
    this.cod.city.name = n;
    this.cod.list.main.humidity = h;
    this.cod.list.main.temp = t;
  }
}

这是我的组件代码：

import { WeatherRestService } from './../weatherRest.service';
import { Component, OnInit } from '@angular/core';
import { Weather } from '../models/weather';

@Component({
  selector: 'app-widget',
  templateUrl: './widget.component.html',
  styleUrls: ['./widget.component.css']
})
export class WidgetComponent implements OnInit {

  weather: Weather[];
  eval: Weather[] = [];
  light = 0;

  constructor(public rest:WeatherRestService) { }

  ngOnInit() {
    this.index();
  }

  index() {
    this.rest.index().subscribe(
      weather => {
        this.weather = weather;
        this.eval = this.weather;
        this.evaluate();
      },
      err => {
        console.error('error retreiving properties');
        console.error(err);
      }
      );
  }

  display(){
    console.log(this.weather);
    this.evaluate();
  }

  evaluate() {
    if (this.eval.list[0].main.temp < 40) {
      this.light = 2;
    } else if (this.eval.list[0].main.temp >= 40 && this.eval.list[0].main.temp < 80) {
      this.light = 3;
    } else if (this.eval.list[0].main.temp >= 80) {
      this.light = 1;
    }
    console.log(this.eval);
    console.log(this.eval.list[0].main.temp);
    }

}

这是WeatherRest服务（标头没有被使用，似乎不需要它们，当我这样做时得到了405：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})

export class WeatherRestService {
  private url = 'http://api.openweathermap.org/data/2.5/forecast?id=5417598&APPID=';
  private auth = 'xxxxxxxxxxxxxxxxxx';

  constructor(private http: HttpClient) {
  }

  index() {
    let headers = new HttpHeaders();
    headers = headers.append('Authorization', 'Basic ');
    headers = headers.append('Content-Type', 'application/json');
    headers = headers.append('Accept', 'application/json');
    headers = headers.append('Content-Encoding', 'none');
    headers = headers.append('Origin', 'http://localhost:4200');


    return this.http.get<any[]>(this.url + this.auth + '&units=imperial');
    // return this.http.get(this.url);

  }
}

Answer 1

出现此错误（“天气']类型不存在“属性'列表'”）是因为出现在您的Weather类中，您将所有内容包装在“鳕鱼”对象中。另外，您收到的Weather不是数组，而是一个简单的对象。 请注意，根本不调用构造函数。我将进行以下更改：

像这样更改Weather类：

export class Weather {
  cod: string;
  city: {
    id: number,
    name: string
  };
  list: {
    main: {
      humidity: number,
      temp: number,
    }
  };
}

然后加入组件：

export class AppComponent implements OnInit {
  weather: Weather;
  eval: Weather;

完成这些更改后，您将获得一个可以运行的应用程序。另外，我将“ eval”重命名为其他名称，因为“ eval”是JS中的函数。有关详细信息，请参见this链接。

Angular：访问JSON对象中的数据

1 个答案: