HTTP请求角度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());
    }
}

...but控制台显示以下错误：

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

}

在你的DataService上

@Injectable()
export class DataService {

    public data: any;

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

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

Answer 2

正如@PierreDuc已经说过的，你应该在component类中定义该变量，以便在Class上下文中可用。

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

代码

@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
        )
    }
}