Question

使用ngFor将json放入html相对容易，但我需要在组件的ts中获取json字段的值，以便将其放入图形中。

我的json中有一个名为'value'的字段。如何将所有值放入数组？

到目前为止我的代码：

import { WeatherstatsService } from '../weatherstats.service';
import 'rxjs/add/operator/map';

@Component({
  selector: 'weatherchart',
  templateUrl: './weatherchart.component.html',
  styleUrls: ['./weatherchart.component.css']
})
export class WeatherchartComponent implements OnInit {

  constructor(private weatherstatsservice: WeatherstatsService) { }

  title = "Title";
  data: any;
  datavalues = [];

  chart = new Chart({
        chart: {
          type: 'line'
        },
        title: {
          text: this.title,
        },
        credits: {
          enabled: false
        },
        series: [{
          name: 'Line 1',
          data: [1, 2, 3]
        }]
      });

    // add point to chart serie
    add() {
      this.chart.addPoint(Math.floor(Math.random() * 10));
    }

    getyeardata(data, datavalues) {

    }

    ngOnInit() {
      this.weatherstatsservice.getWeatherData()
        .subscribe(data => {
          this.data = data;
        })

        console.log(value);
      // console.log(this.data)
    }
}

我的json看起来像这样，但很重要：

[{"id":1,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"JAN","value":6.1},{"id":2,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"FEB","value":7.2},{"id":3,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"MAR","value":8.9},{"id":4,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"APR","value":9.6},{"id":5,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"MAY","value":14.5},{"id":6,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"JUN","value":17.1},{"id":7,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"JUL","value":17.3},{"id":8,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"AUG","value":16.9},{"id":9,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"SEP","value":15.6},{"id":10,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"OCT","value":12.5},

json字段是id，measurement_type，location，year，month_or_season

错误日志：

WeatherchartComponent.html:7 ERROR TypeError: Cannot read property 'year' of null
    at Object.eval [as updateRenderer] (WeatherchartComponent.html:7)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14378)
    at checkAndUpdateView (core.js:13514)
    at callViewAction (core.js:13859)
    at execEmbeddedViewsAction (core.js:13817)
    at checkAndUpdateView (core.js:13510)
    at callViewAction (core.js:13859)
    at execComponentViewsAction (core.js:13791)
    at checkAndUpdateView (core.js:13515)
    at callViewAction (core.js:13859)

Answer 1

试试这个。

ngOnInit() {
      this.weatherstatsservice.getWeatherData()
        .subscribe(data => {
         if(JSON.stringify(data)!=[]){
           this.data=data;
           this.data.forEach( res => {
              this.datavalues.push(res.value);
           });
        }
    })
  }

（括号更正）

Answer 2

let array;
array.push(object.value);

你试过这个吗？

发布对象

更新：发布正常形式的对象，以便我能更好地理解

.subscribe(data => {
this.data = data;
 this.data.forEach( result => {
      this.datavalues.push(result.value);
   });
})

尝试将请求和构造函数中的所有内容都放在ngOnInit

中

访问Angular 5中的json字段并输入变量

2 个答案: