Question

我从Angular2开始，需要一些帮助。

当我从HTTP请求JSON时，它返回我的预期，但我无法将Observable转换为我的特定对象。

问题是将方法getHttpRequest的返回转换为对象AlarmStatus

HTML：

   DATE {{alarmStatus.updateDate}}

CLASS：

export class AlarmStatus {
  updateDate: string;

  fromJSON(obj: any) {
    this.updateDate = obj.updateDate;

    return this;
  }
}

COMPONENT：

import { Component, OnInit } from '@angular/core';
import { AngularCompilerOptions } from '@angular/compiler-cli';

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() {
    console.log('service: ', this.dashboardService.getHttpRequest());
  }
}

SERVICE：

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 'rxjs/add/operator/do';

import { AlarmStatus } from '../alarmStatus';

@Injectable()
export class DashboardService {

  private _url = 'http://localhost/teste.php?action=getData';

  alarmStatus: AlarmStatus;

  constructor(private _http: HttpClient) { }

  getHttpRequest(): Observable<AlarmStatus> {
       return this._http.get(this._url)
      .map((res: Response) => res )
      .subscribe((json: Object) => {
        this.alarmStatus = new AlarmStatus().fromJSON(json);
      });

  }
}

谢谢！

Answer 1

您应该在您的组件中订阅。您的代码将如下所示：

COMPONENT：

import { Component, OnInit } from '@angular/core';
import { AngularCompilerOptions } from '@angular/compiler-cli';

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(data => {
  console.log(data);
});
  }
}

SERVICE：

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 'rxjs/add/operator/do';

import { AlarmStatus } from '../alarmStatus';

@Injectable()
export class DashboardService {

  private _url = 'http://localhost/teste.php?action=getData';

  alarmStatus: AlarmStatus;

  constructor(private _http: HttpClient) { }

  getHttpRequest(): Observable<AlarmStatus> {
       return this._http.get(this._url)
      .map((res: Response) => new AlarmStatus().fromJSON(res); )


  }
}

希望它会有所帮助

Angular 2 - 将HttpClient JSON返回给Object

1 个答案: