Javascript Angular 5-HttpClient服务-组件未获取数据

我正在使用Angular 5并试图从JsonPlaceholder获取一些数据

首先，我创建了服务，然后添加：

import { HttpClientModule } from '@angular/common/http';

这是服务代码：

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

@Injectable()
export class DataService {

  private ROOT_URL = 'http://jsonplaceholder.typicode.com';

  constructor(private http: HttpClient) {}

  getPosts() {
    this.http.get(`${this.ROOT_URL}/posts`).subscribe(data => {
      return data;
    });
  }

}

最后，在我的app.component.ts上：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';

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

  data;

  constructor(private dataService: DataService) {

    this.data = dataService.getPosts();
    console.log(this.data;
  }

  ngOnInit() {
  }

}

在控制台上，它只是返回“未定义”

我做错了什么？

从'@angular/common/http'导入{HttpClientModule}；
//这是服务代码：
从“@angular/core”导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
@可注射（）
导出类数据服务{
私有根目录http://jsonplaceholder.typicode.com';
构造函数（私有http:HttpClient）{}
getPosts（）{
//如果要使用从.get（）返回的observable
//…你需要做“返回”
返回this.http.get（`${this.ROOT\uURL}/posts`）；
}
}
//app.component.ts：
从“@angular/core”导入{Component，OnInit}；
从“../../services/data.service”导入{DataService}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./parent.component.html”，
样式URL:['./parent.component.css']
})
导出类AppComponent实现OnInit{
数据；
构造函数（专用数据服务：数据服务）{
this.data=dataService.getPosts（）；
//因此，如果要在外部使用http调用的值。。
//…这里的服务是一个做订阅的好地方（）
this.data.subscribe（数据=>{
console.log（this.data；
});
}
恩戈尼尼特（）{
}
}

不要订阅服务，返回可观测值并在组件上订阅。因为它是异步的，所以组件上的数据变量将是未定义的，因为您在http请求解析值之前进行了赋值

关于服务：

getPosts() {
    return this.http.get(`${this.ROOT_URL}/posts`);
}

关于成分：

ngOnInit() {
    this.dataService.getPosts().subscribe(posts => this.posts = posts);
}

---

请尝试以下代码段。 您正在获得未定义的

，因为您在

http

请求解析值之前分配了数据。请从服务中删除订阅并将其移动到组件

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {

  private ROOT_URL = 'https://jsonplaceholder.typicode.com';

  constructor(private http: HttpClient) {}

  getPosts() {
    return this.http.get(`${this.ROOT_URL}/posts`);
  }

}

AppComponent.ts

import { Component } from '@angular/core';
import {DataService} from './data.service';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ] 
})
export class AppComponent  {
  constructor(public data:DataService){

    this.data.getPosts().subscribe(data=>{
      console.log(data);
    })
  }

}

---

请参见此处

您需要返回值，但不返回任何内容。您的return语句位于嵌套lambda函数中，因此在使用它的位置使用“return”会导致内部函数返回值，而不是外部函数返回所需的值

---

我建议您阅读异步编程，尤其是Observable（它与Promise的概念相同）在Angular.

中，我基本上同意@Eduardo Vargas answer，但在resolver中这样做可能也是一个好主意，它将调用api，并将数据放入路由快照。由于这一点，它不会在空页上等待在subscribe in构造函数中加载数据。更多信息如下：

---

你需要订阅（）@micheledbenedetto他做了：）你的代码对我来说很好。如果我

console.log（data.json（））

，我会在控制台中得到一个包含100个对象的数组。你只需要使用

数据

，而不是简单地返回它。哦，对不起，我没有注意到：）@micheledbenedetto代码与console.log一起工作，但不与“return”一起工作。出于某些原因，请同时查看我的答案。像上面的回答一样，不在解析器中执行此操作将导致在进入页面后显示数据的轻微延迟。