Angular 2：如何将HttpClient返回的JSON转为自定义AlarmStatus对象

嘿，我看到你在把HTTP请求返回的JSON转换成自定义的AlarmStatus对象时遇到了麻烦，咱们一步步来修复这个问题：

核心问题分析 #

你的代码里有两个关键问题导致转换失败：

1. 服务内部错误调用了subscribe：你的getHttpRequest方法声明返回Observable<AlarmStatus>，但你在服务里直接调用了.subscribe()，这会返回一个Subscription对象，而不是你需要的Observable。订阅操作应该放在组件中，服务只负责提供数据流。
2. 没有在map操作中完成对象转换：当前的map只是直接返回原始响应，没有把它转换成AlarmStatus实例。

修正后的代码 #

1. 修正DashboardService

移除服务内部的subscribe，在map操作符里完成JSON到AlarmStatus的转换：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { AlarmStatus } from '../alarmStatus';

@Injectable()
export class DashboardService {
  private _url = 'http://localhost/teste.php?action=getData';

  constructor(private _http: HttpClient) { }

  getHttpRequest(): Observable<AlarmStatus> {
    return this._http.get(this._url)
      .map((res: any) => {
        // 将响应数据转换为AlarmStatus实例
        return new AlarmStatus().fromJSON(res);
      })
      .catch(error => {
        console.error('请求出错:', error);
        throw error; // 抛出错误让组件处理
      });
  }
}

2. 修正DashboardComponent

在组件中订阅服务返回的Observable，获取数据并赋值给alarmStatus：

import { Component, OnInit } from '@angular/core';
import { DashboardService } from './dashboard.service';
import { AlarmStatus } from '../alarmStatus';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  alarmStatus: AlarmStatus;

  constructor(private dashboardService: DashboardService) {}

  ngOnInit() {
    this.dashboardService.getHttpRequest()
      .subscribe(
        (status: AlarmStatus) => {
          this.alarmStatus = status;
          console.log('获取到的告警状态:', this.alarmStatus);
        },
        error => {
          console.error('加载告警状态失败:', error);
        }
      );
  }
}

3. 优化AlarmStatus类（可选）

你可以给AlarmStatus添加一个静态方法，让对象转换更简洁：

export class AlarmStatus {
  updateDate: string;

  // 静态方法：直接从JSON对象创建AlarmStatus实例
  static fromJSON(obj: any): AlarmStatus {
    const status = new AlarmStatus();
    status.updateDate = obj.updateDate;
    return status;
  }

  // 保留原有实例方法也可以，二选一即可
  fromJSON(obj: any) {
    this.updateDate = obj.updateDate;
    return this;
  }
}

如果用静态方法，服务里的map就可以改成：
.map((res: any) => AlarmStatus.fromJSON(res))

额外提示 #

为了避免模板在数据加载完成前报错，建议在HTML模板中使用安全导航操作符：

DATE {{alarmStatus?.updateDate}}

这个操作符会在alarmStatus为undefined或null时停止访问updateDate，防止出现Cannot read property 'updateDate' of undefined的错误。

内容的提问来源于stack exchange，提问作者Leonardo Machado