Angular 显示单个 http 响应

Question

我正在努力通过角度显示来自单个 JSON 响应的数据。 我为数据 interndata.model.ts 创建了一个类

export class Interndata {
humidity: number;
temperature: number;

constructor(humidity:number, temperature:number) {
    this.humidity = humidity;
    this.temperature = temperature;
  }

}

为此，我创建了一个服务 interndata.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Interndata } from './interndata.model';
import { Observable } from 'rxjs';

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

 constructor(private http: HttpClient){}

 public getDisplayData(): Observable<Interndata[]>{
       return this.http.get<Interndata[]>('http://192.168.0.110:8080/process');
      }
 }

来自网络服务的我的 JSON 响应是这样的：

{“湿度”：49.099998474121094，“温度”：24.899999618530273}

AppComponent 类会定期获取数据并更新 ngx-gauge 以显示数据。

import { Component, OnInit } from '@angular/core';
import { NgxGaugeModule } from 'ngx-gauge';
import { HttpClient } from '@angular/common/http';
import { concatMap, map, merge, switchMap, tap, delay, skip } from 'rxjs/operators';
import { concat, of, Observable, BehaviorSubject, timer } from 'rxjs';
import { Interndata } from './interndata.model';
import { InterndataService } from './interndata.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})



export class AppComponent implements OnInit {

interndata = new Array<Interndata>();
title = 'Home Automation Monitor Service';
tempValue = 0;
humValue = 0;
gaugeType = "semi";
tempLabel = "Temperatur";
tempAppendText = "°C";
gaugeThick = 25;
gaugeForegroundColor = "#000000";
gaugeBackgroundColor = "#FFFFFF";
tempMin = 0;
tempMax = 30;
humLabel = "Luftfeuchtigkeit";
humAppendText = "%";
humMin = 0;
humMax = 100;
constructor(private servinterdata : InterndataService){
    servinterdata.getDisplayData().subscribe((res) => {
        this.interndata = res;
        console.log(this.interndata);
    });
}

ngOnInit () {

}

}

我不知道如何使用来自 JSON 响应的数据。 Console.log 将 JSON 作为字符串返回。

this.interndata.humidity 

返回未定义。如何访问我从 JSON 响应中获取的数据？

Answer 1

如果它返回一个字符串，this.interndata = JSON.parse(res) 应该会为您提供一个不错的 javascript 对象。如果这不起作用，请告诉我，我们可以尝试其他方法。

Answer 2

public getDisplayData(): Observable<Interndata[]> 

表示返回一个 Interndata 数组的 Observable。这意味着您已将响应键入为数组 Interndata[] 也许这就是您想要的，但在这种情况下，json 必须是这样的数组。

[{"humidity": 49.099998474121094, "temperature": 24.899999618530273}] 

并且会像这样被访问：

this.interndata[0].humidity

为了帮助调试，您可以添加这样的错误处理程序

public getDisplayData(): Observable<Interndata[]> {
       return this.http.get<Interndata[]>('http://192.168.0.110:8080/process')
        .pipe<Interndata[]>(
          catchError(err=>console.log('Err: '+err))
        );
}

这是一个很好的 RxJx 错误处理教程：https://blog.angular-university.io/rxjs-error-handling/