TypeError: Невозможно прочитать свойство "temp" неопределенного в Angular 2+ при передаче данных в холст-граф

Easi Test спросил: 28 марта 2018 в 01:45 в: javascript

Привет, ребята Я новичок в Angular 2 +,

У меня есть данные из моего API, отформатированные следующим образом:

{
  "temp":49.47,
  "time":"05:17:55 PM"
}

Что мне нужно сделать данные из формата выше и передать данные в граф.

Я могу получить данные из Api, но я не могу передать данные в Component File, Может ли кто-нибудь проверить мой код и помочь мне?

У меня есть ServerService, который захватывает данные из моего API

@Injectable()
export class ServerService {
    private basicUrl ='http://10.188.16.104:8001/ws/temp';
dataSource;    constructor(private http: Http) { }   getServers(): Observable<any> {
    return this.http.get(this.basicUrl)
.subscribe(data =>this.dataSource =data);
    }
}

Из моего кода компонента:

import { Component, OnInit } from '@angular/core';
import { ServerService } from '../server.service';
//import { Http } from '@angular/http';
//import { Observable } from 'rxjs/Observable';
import { Observable } from 'rxjs/Rx'; @Component({
  selector: 'app-ledswitch',
  templateUrl: './ledswitch.component.html',
  styleUrls: ['./ledswitch.component.css']
})
export class LedswitchComponent implements OnInit {  dataSourceObservable :Observable<any>
  dataSource;  constructor(private serverService: ServerService) {
           console.log("My Data"+this.dataSource);
           console.log("My Data");
           this.dataSource  = this.serverService.getServers()
     .map(response => react.json());   }
  ngOnInit() {
  }// Chart
  chartOptions = {
    responsive: true
  };// Passing X-axis data in a graph
  chartData = [
    { data: [this.dataSource.temp], label: 'Temp vs Time' },
  ];
// Passing Y-axis data in a graph
  chartLabels = [this.dataSource.time];    this.chartLabels = [...this.chartLabels, label];  }  onChartClick(event) {
    console.log(event);
  }}

и HTML-код

 <div style="width: 50%;">
    <canvas
        baseChart
        [chartType]="'line'"
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
        [legend]="true"
        (chartClick)="onChartClick($event)">
    </canvas>
  </div>

1 ответ

Melchia ответил: 28 марта 2018 в 02:45

Ваша служба должна вернуть наблюдаемое:

@Injectable()
export class ServerService {
    private basicUrl ='http://10.188.16.104:8001/ws/temp';
dataSource;    constructor(private http: Http) { }   getServers(): Observable<any> {
    return this.http.get(this.basicUrl).map(response => react.json());
    }
}

Затем в вашем компоненте:

  constructor(private serverService: ServerService) {} ngOnInit() {
     // Chart
     this.chartOptions = {
         responsive: true
     };     this.serverService.getServers()
         .subscribe(data => {
             // Passing X-axis data in a graph
             this.chartData = [{
                 data: [data.temp],
                 label: 'Temp vs Time'
             }, ];
             // Passing Y-axis data in a graph
             this.chartLabels = [data.time];             this.chartLabels = [...this.chartLabels, label];         });
 }
Easi Test ответил: 28 марта 2018 в 03:16
Я получаю ошибку ниже,
Easi Test ответил: 28 марта 2018 в 03:17
ОШИБКА в файле src / app / ledswitch / ledswitch.component.ts (41,31): ошибка TS2339: свойство 'temp' не существует для типа 'Response'. src / app / ledswitch / ledswitch.component.ts (45,40): ошибка TS2339: свойство "time" не существует для типа "Response".
Easi Test ответил: 28 марта 2018 в 03:35
и он успешно скомпилирован.
Melchia ответил: 28 марта 2018 в 03:42
Хорошо проверь свой ответ чувак. У меня нет доступа к вашему заявлению. Что возвращает сервер? Ты не можешь даже сделать это?