Javascript 如何在angular4中从服务返回数据

来自Angular1x背景。我正在将现有应用迁移到Angular4

这就是我的ng4服务的样子

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

@Injectable()
export class DataService {
  private _http : Http;

constructor(http:Http) {
   this._http = http;
}


public GetPosts() : any{
this._http.get("https://jsonplaceholder.typicode.com/posts").subscribe(data => {
  const posts = data.json();
  console.log(posts); // logs the desired json
  return posts;
})}}

正在从组件中使用上述服务

import { Component, OnInit } from '@angular/core';
import {Customer} from './customer.model';
import  {DataService } from '../../providers/data.service';

@Component({
 selector: 'app-customer',
 templateUrl: './customer.component.html',
 styleUrls: ['./customer.component.css']
})

export class CustomerComponent implements OnInit {

private _dService: DataService;

constructor(dService:DataService) {
 this._dService = dService;}

ngOnInit() {}


public GetAll(){
  let posts =this._dService.GetPosts();
  debugger;
  console.log(posts); // undefined
 /* here the posts is getting UNDEFINED (error) */
}}

---

在Angular1X中，我曾经从ngService返回承诺，但在angular4中如何做同样的事情？？？

订阅调用应该在组件的代码中

订阅调用应该在组件的代码中

您应该订阅组件中的可观察内容，而不是在服务中

为您效劳

public GetPosts() : any{
   return this._http.get("https://jsonplaceholder.typicode.com/posts");
}

在你的组件中

this._dService.GetPosts().subscribe(data => {
    const posts = data.json();
    console.log(posts);
    // Do whatever you like with posts

)};

---

您应该订阅组件中的可观察对象，而不是服务中的可观察对象

为您效劳

public GetPosts() : any{
   return this._http.get("https://jsonplaceholder.typicode.com/posts");
}

在你的组件中

this._dService.GetPosts().subscribe(data => {
    const posts = data.json();
    console.log(posts);
    // Do whatever you like with posts

)};

在组件中： 您声明的最佳实践：

data : any; 

this._dService.GetPosts().subscribe(
      data => {this.data = data;
      console.log(this.books);},
      err => {console.log(err);},

      ()=> {console.log("terminated");}
    );

在组件中： 您声明的最佳实践：

data : any; 

this._dService.GetPosts().subscribe(
      data => {this.data = data;
      console.log(this.books);},
      err => {console.log(err);},

      ()=> {console.log("terminated");}
    );

---

是的，你说得对。只是试着用你的输入。我真傻。谢谢：）是的，你说得对。只是试着用你的输入。我真傻。谢谢：）你不需要为你的隐私设置标签_dService:DataService；在组件的第一行中，仅在构造函数中就足够了。尝试witouht@AnouarMokhtari是的。谢谢：）你使用angular CLI吗？你不需要使用私有的_dService:DataService；在组件的第一行中，仅在构造函数中就足够了。尝试witouht@AnouarMokhtari是的。谢谢：）你使用angular CLI吗？谢谢ALex，你的帖子一经允许就会被接受，如果你觉得值得，请升级我的帖子：）谢谢ALex，你的帖子一经允许就会被接受，如果你觉得值得，请升级我的帖子：）.map（）在angular4中似乎不可用：）你必须导入RXJS库。进口“rxjs/Rx”；在您的服务中，它是很棒的库导入'rxjs/add/operator/map'；。map（）在angular4中似乎不可用：）您必须导入RXJS库。进口“rxjs/Rx”；在您的服务中，它是很棒的库导入'rxjs/add/operator/map'；