Http Anruf als Dienst in Angular

Question

Ich bin neu zu Angular und ich versuche, eine einfache HTTP-Anfrage für Daten zu machen. Wie kann ich auf diese Daten in meiner Komponente zugreifen? Ich erhalte die Fehlermeldung 'Can not Eigenschaft lesen 'get' undefinierter'

data.service.ts

import { Injectable } from '@angular/core' 
import { HttpClient } from '@angular/common/http' 

@Injectable() 
export class FetchData { 

    private url: string = 'https://jsonplaceholder.typicode.com/users' 
    constructor(private http: HttpClient){} 

    get(){ 
     return this.http.get(this.url).subscribe(data => { 
      console.log(data) 
     }) 
    } 

} 

table.component.ts

import { FetchData } from './datatable.service'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-datatable', 
    templateUrl: './datatable.component.html', 
    styleUrls: ['./datatable.component.css'] 
}) 
export class DatatableComponent implements OnInit { 

    Data: FetchData 

    constructor() { } 

    ngOnInit() { 
    this.Data.get() 
    } 

} 

Answer 1

versuchen, dieses:

export class DatatableComponent implements OnInit { 
constructor(private dataService: FetchData) { } 

ngOnInit() { 
    this.dataService.get() 
}} 

Answer 2

Sie müssen den Dienst in Ihrer Komponente "injizieren" und das Abonnement in Ihrer Komponente vornehmen.

In Ihrem Service sollten Sie Ihre Antwort "abbilden".

import { Injectable } from '@angular/core' 
import { HttpClient } from '@angular/common/http' 
import 'rxjs/add/operator/map'; 

    @Injectable() 
    export class FetchData { 

     private url: string = 'https://jsonplaceholder.typicode.com/users' 
     constructor(private http: HttpClient){} 

     get(){ 
      return this.http.get(this.url).map(data => { 
       return data.json(); 
      }) 
     } 

    } 

Ihre Komponente:

import { FetchData } from './datatable.service'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-datatable', 
    templateUrl: './datatable.component.html', 
    styleUrls: ['./datatable.component.css'] 
}) 
export class DatatableComponent implements OnInit { 

    constructor(private fetchDataService: FetchData) { } 

    ngOnInit() { 
    this.fetchDataService.get().subscribe(res => { 
     console.log(response); 
    }); 
    } 

}