javascript - 在 Angular 中将 Http 调用作为服务

Question

我是 Angular 的新手，我正在尝试对数据进行简单的 http 请求。我如何在我的组件中访问这些数据？我收到错误“无法读取未定义的属性‘get’”

数据.服务.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)
        })
    }

}

表格.组件.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

您需要在您的组件中“注入(inject)”服务，并在您的组件中进行订阅。

在您的服务中，您应该“映射”您的响应。

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

    }

您的组件:

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

}