【问题标题】：Service Data not displaying in Component Angular4服务数据未显示在组件 Angular4 中
【发布时间】：2017-09-30 08:33:59
【问题描述】：

我想将数据从服务返回到组件，但是当我使用服务变量返回数据时，没有出现错误，只是未定义.... 请指导我解决问题所在。当使用我在 Angular 中应用的离子相同逻辑时，我得到了数据，但在 Angular 4 应用程序中没有。

signal.service.ts

当我做console.log(this.signal)

给我一个正确的对象数组。

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

@Injectable()

export class SignalsService {
signal : Array<any>;

constructor(public _http:Http) {
    this._http.get('http://localhost/4x/data.php')
        .subscribe(res =>{

            this.signal =  res.json().data;
            return this.signal
        });

} 
}

当我执行控制台时，我的组件在这里显示从服务返回数据的信号 未定义

home.component.ts

import { Component, OnInit } from '@angular/core';
import {HttpModule, Http} from '@angular/http';

import {SignalsService} from '../signals.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
    sig :Array<any>;
   constructor(public _http:Http,public _signa:SignalsService) {

  }
  ngOnInit() {
    console.log(this._signa.signal);


}

此外

当我直接在 ngOnInit 部分的 home.component.ts 中插入 HTTP 的服务请求时，它可以工作并返回数据，但为什么我的服务不工作。

【问题讨论】：

你异步获取数据，这意味着它需要一段时间。您的组件在收到数据之前读取数据。使用 observable 通知组件数据到达。
@GünterZöchbauer 你能告诉我原因还有任何教程来解决这个问题并理解未来的问题。
或许blog.thoughtram.io/angular/2016/01/06/…

标签： angular

【解决方案1】：

您的服务实现是正确的，但是您为什么要在构造函数中加载所有内容最好有一个单独的方法并在该方法上调用 get ，现在只需将组件中的代码替换为此。

更多关于services

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
    sig: Array<any>;
    constructor(public _http: Http) { }
    ngOnInit() {
        this._http.get('http://localhost/4x/data.php')
            .subscribe(res => {
                this.signal = res.json().data;
                console.log(this.signal)
            });
    }
}

最好的解决方案是服务

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

@Injectable()

export class SignalsService {

    constructor(public _http: Http) { }

    get() {
        return this._http.get('http://localhost/4x/data.php')
            .map(res => res.json().data);
    }
}

组件

import { Component, OnInit } from '@angular/core';
import { HttpModule, Http } from '@angular/http';

import { SignalsService } from '../signals.service';


@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
    constructor(public _http: Http, public _signa: SignalsService) {

    }
    ngOnInit() { this._signa.get().subscribe(res => { console.log(res) }) }

【讨论】：

为什么我必须这样做？在许多 youtube 教程中，他们甚至没有谈论这个..请告诉我原因..
@AHP 对你有用吗，我不太清楚为什么教程说你，但这是我们处理服务的理想方式
你是如何访问它的？我猜当你在组件 iside ngOninint 中执行此操作时，它会立即显示在日志中，但不会立即显示在下一行中，这是因为我们正在处理异步代码。只需在模板中使用{{youe var | async}}
所以你告诉this._signa.get().subscribe(res => { console.log(res) })这个控制台日志返回未定义
是的 this._signa.get().subscribe(res => { console.log(res) }) 在 console.log 中给我 undefined

【解决方案2】：

我有同样的错误。我所做的是在 ngOnInit 中添加订阅，就像上面的@Rahul Singh 一样，我在 get() 中使用 map。像这样：

组件

export class HomeComponent implements OnInit {
sig;
constructor(private _signa: SignalsService) {

}
get(){
 return this._signa.get().map(data => {this.sig = data})
}
ngOnInit() { this.get().subscribe(res => { console.log(res) }) }

【讨论】：