HTTP Request Angular 2

Question

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

    } 

私の2番目のファイルが次のようになります。

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プロパティを定義する必要があります：ちょうど..いつもあなたがアクセスする任意のプロパティを定義...

@Injectable() 
export class DataService { 

    public data: any; 

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

と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にthis。

Answer 2

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