Question

我通过Angular2中的json从injectable service文件中获取数据。在服务本身中对其进行安慰时，它会显示数据。但是当我通过调用服务将其返回到我的组件中时，它显示为未定义。

这是组件：

import {Component,OnInit} from "@angular/core"
import { DataService } from "./shared/data.service"
import { IData } from "./shared/data"

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

export class MainComponent implements OnInit{

    data:IData;
    errorMessage:string;

    constructor(private _service:DataService){

    }


    ngOnInit():void{
        this._service.getData()
            .subscribe(data => this.data = data,
            error => this.errorMessage = <any>error);
        console.log(this.data);//this shows undefined on console
    }

}

服务

import { Injectable } from '@angular/core';
import { IData } from './data';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import "rxjs/Rx"

@Injectable()

export class DataService{
    private _dataUrl = 'Data/data.json';

    constructor(private _http:Http){}

    getData():Observable<IData>{
            return this._http.get(this._dataUrl)
            .map((res:Response) => <IData>res.json())
            .catch(this.handleError); 
      }

      private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

JSON：

{
    "Client_ID":45645654,
    "Entity_Name":"Name of Entity",
    "Public_Interest_Entity":"No",
    "Industry_SIC":"Text Information",
    "Status_Client_Assessment":"In Progress",
    "Status_third_party_Assessment":"In Progress",
    "GIS_Details":{
        "GIS_ID":"GIS ID",
        "Global_Ut_Parent_ID":"Global Ut Parent ID",
        "KPMG_External_Audit_Client":"External Audit Client",
        "Direct_Parent_ID":"Direct Parent ID",
        "Global_Ut_DUNS_Number":"Global Ut DUNS Number",
        "GIS_Name":"GIS Name",
        "Global_Ultimate_Parent_Name":"Global Ultimate Parent Name",
        "Restricted_Entity_Status":"Restricted Entity Status",
        "Direct_Parent_Name":"Direct Parent Name"
    },
    "Client_Acceptance":{
        "Evaluation_ID":"Evaluation ID",
        "Client_Risk_Grade":"Client Risk Grade",
        "Evaluation_Type":"Evaluation Type",
        "Approved_on":"Approved on",
        "State":"State",
        "Created_on":"Created on",
        "Last_modified":"Last modified",
        "partner_lead":"partner lead",
        "Requester":"Requester"
    }
}

我做错了什么？我似乎无法弄明白。

Answer 1

您的数据需要一段时间才能收到，因此显示未定义。将其置于订阅内将是完美的

ngOnInit():void{
        this._service.getData()
            .subscribe(data => {
               this.data = data;
               console.log(this.data);//this works
        },
            error => this.errorMessage = <any>error);

}

Answer 2

因为尚未发生，所以您在回拨时收到数据，而不是在订阅活动后立即收到。

ngOnInit():void{
    this._service.getData()
        .subscribe(data => {
           this.data = data;
           console.log(this.data);
      },
        error => this.errorMessage = <any>error);

}

在Angular2中未定义从服务接收的数据

2 个答案: