Json HTTP请求2

我正在尝试从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());
    }
}

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

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'.

---

我做错了什么？

您应该在

datavisualizationoutput

组件上定义

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());
    }
}

---

在

datavisualizationoutput

。。。只是始终使用

此

定义您访问的任何属性，因为@PierreDuc已经说过您应该在组件类中定义该变量，以使其在

类

上下文中可用

此外，您还应该在服务内创建一个负责数据的方法。只要从另一个组件调用相同的方法，它就会返回上次检索到的数据

代码

@Injectable()
export class DataService {
    data: any;
    constructor(http:Http) {
    }

    getData(){
       if(this.data) return Observable.of(this.data)
       else
          return http.get('http;//...API')
            .flatMap(response => {
               this.data = response.json();
               return Observable.of(this.data)
            );
    }
}

组件

export class DatavisualisationOutput {
    myData: any;
    constructor(private dataservice: DataService) {
        dataservice.data
            .subscribe(
                data => this.data = data,
                console.error,
                () => console.log('Look at this:' + data)
            );
    }
    ngOnInit(){
        dataservice.getData().subscribe(
          data => myData = data
        )
    }
}