Http позвоните как сервис в Angular

Question

Http позвоните как сервис в Angular

1

Я совершенно новый для Angular, и я пытаюсь сделать простой HTTP-запрос данных. Как получить доступ к этим данным в моем компоненте? Я получаю сообщение об ошибке 'Не могу прочитать свойство' get 'of undefined'

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

}

FakeEmpire 24 нояб. 2017, в 23:24

Источник

0

angular.io/guide/http
R. Richards 24 нояб. 2017, в 22:30

Теги:

angular

javascript

http

2 ответа

Ещё вопросы

Danny908 · Answer 1 · 2017-11-24T20-48-00.000Z

Вам необходимо "Ввести" службу в свой компонент, а также сделать подписку в своем компоненте.

В вашем сервисе вы должны "отобразить" свой ответ.

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

}

Я думаю, что часть карты больше не нужна с новым HttpClient, который он использует. Эта практика была сделана в более ранних версиях с модулем Http, но HttpClient сделал его устаревшим, если я не ошибаюсь
Похоже, ты прав, я проверил документацию и больше не вижу оператора карты.
Я только что проверил объявление о версии и в официальном сообщении блога для версии 5 также указано, что https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

Fateh Mohamed · Answer 2 · 2017-11-24T20-55-00.000Z

попробуй это:

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

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