Question

我有一个java rest服务，它返回以下json：

Json输出

 {
    "description": "Temperature Sensor",
    "symbol": "°C",
    "name": "degree celsius",
    "maxMeasure": {
        "quantity": 12.8,
        "name": "degree celsius",
        "symbol": "°C",
        "dateTime": "2018-03-15T12:38:23"
    },
    "measure": {
        "quantity": 11.1,
        "name": "degree celsius",
        "symbol": "°C",
        "dateTime": "2018-03-15T18:34:27"
    },
    "minMeasue": {
        "quantity": 5.8,
        "name": "degree celsius",
        "symbol": "°C",
        "dateTime": "2018-03-15T04:09:24"
    },
    "conversionFactor": 1
}

通过这个角度服务，我称之为端点：

SensorService.ts

getSensor(sensorId: string): Observable<Sensor> {
      const headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('token', 'token');
      headers.append('sensorId', sensorId);
      headers.append('unitMeasureId', '1');
      const options = new RequestOptions({ headers: headers });
      return this._http.get(this._sensorurl, options)
        .map(data => <Sensor> data.json())
        .do(data => console.log(data));
   }

我在这个类中映射结果：

Sensor.ts

export class Sensor {
  description: string;
  symbol: string;
  name: string;
  maxMeasure: Measure;
  measure: Measure;
  minMeasue: Measure;
  conversionFactor: number;
}

Measure.ts

export class Measure {
    quantity: string;
    name: string;
    symbol: string;
    dateTime: string;
}

发表声明：

sensor.component.ts

 ngOnInit(): void {
      this._sensor.getSensor(this.route.snapshot.paramMap.get('id'))
          .subscribe(sensor => this.sensor = sensor);
    }

正确读取了json，因为通过控制台我可以读取它，但是当它映射到Sensor对象时会给出一个未定义的输出。

哪里错了？

Answer 1

但是当它映射到Sensor对象时会给出一个未定义的输出。

您的传感器类，而不是接口：

export class Sensor {
  description: string;
  symbol: string;
  name: string;
  maxMeasure: Measure;
  measure: Measure;
  minMeasue: Measure;
  conversionFactor: number;
}

将构造函数添加到度量和传感器，因为您使用的是类：

export class Sensor {
  description: string;
  symbol: string;
  name: string;
  maxMeasure: Measure;
  measure: Measure;
  minMeasue: Measure;
  conversionFactor: number;

  // same to Measure class
  constructor(data: Sensor|Object){
   Object.assign(this, data);
   this.assignToClass();
  }

  assignToClass() {
    this.maxMeasure = new Measure(this.maxMeasure);
    this.measure = new Measure(this.measure);
    this.minMeasue = new Measure(this.minMeasue);

  }

}

然后，在 SensorService.ts ：

中替换

return this._http.get(this._sensorurl, options)
        .map(data => <Sensor> data.json())
        .do(data => console.log(data));

到：

 return this._http.get(this._sensorurl, options)
            .map(data => new Sensor(data))
            .do(data => console.log(data));

如果使用类，则应通过将对象传递给构造函数来创建它的实例。否则，如果接口，您的映射<SomeInterface>dataObj就足够了

Answer 2

尝试return this._http.get<Sensor>(this._sensorurl, options);

Answer 3

在服务中尝试更改：

return this._http.get(this._sensorurl, options)
    .map(data => <Sensor> data.json())
    .do(data => console.log(data));

为：

return this._http.get<Sensor>(this._sensorurl, options)
    .map(data => data.json())
    .do(data => console.log(data));

如果您使用angular＆gt; = 4.3.0将http: Http更改为http: HttpClient（import { HttpClient } from '@angular/common' - 您不必解析为JSON。您将能够删除{{1 }}

Angular2将json映射到对象

3 个答案: