Question

我是angular2的新手，我需要一些帮助。我正在使用以下服务类。

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';

@Injectable()
 export class UsersService {
    private _url = "http://jsonplaceholder.typicode.com/users";

    constructor(private _http: Http){
    }

    getUsers(){
        return this._http.get(this._url)
            .map(res => res.json());
    }
 }

当我在下面的组件中调用上面的服务时，我得到了未定义的值。

import{Component, OnInit} from 'angular2/core';
import{UsersService} from './users.service';

@Component({
    selector: 'users',
    template:'In users',
    //templateUrl: 'app/users.component.html',
    providers: [UsersService] 
})

export class UsersComponent implements OnInit{
users: any[];

    constructor(private _service: UsersService){
    }

    ngOnInit(){
        this._service.getUsers()
            .subscribe(result => this.users = result);

        console.log(this.users);
    } 
}

但是如果我尝试在服务类的控制台中记录该值，那么它会在那里显示。任何帮助都会非常值得赞赏。感谢

Answer 1

Angular 2 HTTP请求返回从其他代码异步运行的Observable。在ngOnInit()中，您订阅getUsers()返回的Observable，然后在订阅之外，您拥有console.log()。

换句话说，console.log(this.users)在getUsers()实际完成HTTP请求以实际获取用户之前以及订阅已将其分配给this.users之前运行。

如此更改ngOnInit()，您将看到所需的结果：

ngOnInit(){
    this._service.getUsers()
        .subscribe(result => {
            this.users = result;
            console.log(this.users);
        });
}

另见：

RxJS docs on Observables

Angular 2 docs on the HTTP client

Answer 2

this.user将在observable准备就绪后立即可用，在此之前，您必须使用* ngIf保护您的HTML代码以避免例外。

angular2 observable，在组件中未定义

2 个答案: