json - HTTP 请求 Angular 2

Question

我正在尝试从 Angular 2 中的外部 API 发出请求。我想在 2 个文件中管理数据请求并将结果显示为 json。

我的数据输出组件如下所示:

import {Component} from '@angular/core'
import {DataService} from './datavisualisation.service'

    @Component({
        selector: 'app-datavisualisation-output',
        template: ` 
      `
    })
    export class DatavisualisationOutput {
        constructor(dataservice: DataService) {
            dataservice.data
                .subscribe(
                    data => this.data = data,
                    console.error,
                    () => console.log('Look at this:' + data)
                );
        }

    }

我的第二个服务文件如下所示:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DataService {
    constructor(http:Http) {
        this.data = http.get('http;//...API')
            .map(response => response.json());
    }
}

...但控制台显示以下错误:

components/datavisualisation/dataservices/datavisualisation.output.service.ts:12:26 
Property 'data' does not exist on type 'DataService'.
components/datavisualisation/dataservices/datavisualisation.output.service.ts:14:29 
Property 'data' does not exist on type 'DatavisualisationOutput'.
components/datavisualisation/dataservices/datavisualisation.output.service.ts:16:43 Cannot find name 'data'.
components/datavisualisation/dataservices/datavisualisation.service.ts:8:13 
Property 'data' does not exist on type 'DataService'.

我做错了什么？

Answer 1

您应该在 DatavisualisationOutput 组件上定义 data 属性:

export class DatavisualisationOutput {

    public data: any; //this one

    constructor(dataservice: DataService) {
        dataservice.data
            .subscribe(
                data => this.data = data,
                console.error,
                () => console.log('Look at this:' + data)
            );
    }

}

在您的数据服务上:

@Injectable()
export class DataService {

    public data: any;

    constructor(http:Http) {
        this.data = http.get('http;//...API')
            .map(response => response.json());
    }
}

在 DatavisualisationOutput 上...只是..始终定义您使用 this 访问的任何属性。