Question

我正在使用JSONPlace holder Fake api来获取数据。我正在服务api数据，但如果我从我的应用程序组件调用该服务，我将得到未定义为什么这是我的代码

我的服务。

import { Injectable } from '@angular/core';
import { Http, URLSearchParams, Response, RequestOptions, Headers } from '@angular/http';
import 'rxjs/RX';
import 'rxjs/add/operator/map';
@Injectable()
export class Service {
    apiRoot: string = 'https://jsonplaceholder.typicode.com/comments?' 
    postId = 1;
    data;
    constructor(private _http: Http) {
        this._http.get(this.apiRoot).subscribe((data) => {
            this.data = data.json();
        });
    }
    init() {
        return this.data;
    }

}

我的组件代码是

import { Component, OnInit } from '@angular/core'; import { InfiniteService } from './infinite.service'; //import all rxjs/Rx opeartor  import 'rxjs/add/operator/map';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit {
    data;
    constructor(private _infinteService: InfiniteService) {
        this.data = this._infinteService.init();
        console.log(this.data);
    }

    GetPosition($event) {
        if ($event == 'Bottom') {
            console.log($event);
        }
        else {
            console.log($event);
        }
    }
    ngOnInit() {


    }

}

为什么我无法在组件Plz中获取服务数据的一些解释

Answer 1

在代码中进行以下更改。

服务：

constructor(private _http: Http) {
}
init() {
    return this._http.get(this.apiRoot);
}

组件：

constructor(private _infinteService: InfiniteService) {
    this._infinteService.init().subscribe((data) => {
        this.data = data;
        console.log(this.data);
    });
}

您需要在组件调用中使用.subscribe。

Answer 2

您不需要数据对象上的Observable。从Angular4开始，默认的responseType是JSON，并且已经为我们解析了响应数据。

您应该从服务中返回{{1}}并在您的组件中订阅它。

Answer 3

因为HTTP是异步功能！我建议使用HttpClient，因此您不需要使用map函数！你可以试试

getData(): Observable<any> {
 return this._http.get(this.apiRoot)
}

你只需要打电话给他那样的组件

this._infinteService.getData().subscribe(
 data => console.log(data)
)

您需要返回一个Observable，然后您可以使用subscribe来调用请求。试试看，告诉我是否有效！感谢

Answer 4

发生这种情况的原因是，从服务器获取响应将花费一些时间。因此，我们可以将其设定为承诺。使用以下命令获取Promise中的数据。

 this._customerService.getCustomers().subscribe(data => this.customers = data);

如果我从组件调用，为什么角度服务数据是未定义的

4 个答案: