HTTP Request Angular 2

Question

Ich versuche eine Anfrage von einer externen API in Winkel 2 zu machen. Ich möchte die Datenanforderung in 2 Dateien verwalten und das Ergebnis als json anzeigen.

sieht Meine Daten-Ausgabe-Komponente wie folgt aus:

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

    } 

Meine zweite Datei für den Dienst wie folgt aussieht:

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

... aber die Konsole zeigt folgende Fehlermeldung:

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

Was mache ich hier falsch?

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

} 

und auf DataService:

Answer 1

Sie sollten die data Eigentum auf Ihrer DatavisualisationOutput Komponente definieren

@Injectable() 
export class DataService { 

    public data: any; 

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

und auf DatavisualisationOutput ... Nur .. definieren immer jede Eigenschaft, die Sie mit Zugang this.

Answer 2

Wie @PierreDuc bereits sagte, sollten Sie diese Variable innerhalb der Komponentenklasse definieren, um sie im Kontext Class verfügbar zu machen.

Sie sollten auch eine Methode in einem Dienst erstellen, der für Daten verantwortlich wäre. Rufen Sie einfach die gleiche Methode von einer anderen Komponente auf und es werden die Daten zurückgegeben, die das letzte Mal abgerufen wurden.

-Code

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

Komponente

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