HTTP请求角2

问题描述：

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

我的数据输出部分看起来是这样的：

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

我在做什么错在这里？

答

应定义data财产上的DatavisualisationOutput组件：

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。

答

由于@PierreDuc已经表示您应该在组件类中定义该变量，以使其在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 
     ) 
    } 
}

HTTP请求角2

相关推荐