Question

我正在使用Angular和RxJS编写项目。我实现了可注入的类，它从JSON中检索数据，如下所示：

import {Injectable, Inject} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

import {Student} from './student.data';

@Injectable()
export class RosterService {
    private students : Student[];
    constructor(@Inject(Http) private http:Http){}

    private getStudents(){
        this.http.get('/JSON/students.json')
            .map(data => data.json().students)
            .subscribe(data => this.students = data);
    }

    public getRoster() {
        this.getStudents();
        return this.students;
    }
}

将RosterService注入AppComponent的构造函数后（包括作为提供者包含在@Component中）：

export class AppComponent {
    public students : Student[];
    constructor(private _rosterService : RosterService) {
        this.students = _rosterService.getRoster();
    }
 }

但是当我调用getRoaster（）方法时，它不会等到执行getStudents（async get call）。结果我得到了未定义的值。

我该如何处理？谢谢你的回应。

Answer 1

你应该像这样返回Observable<Student[]> from the getRoster`方法

getRoster(): Observable<Student[]>{
       return this.http.get('/JSON/students.json')
            .map(data => data.json().students);
    }

然后订阅app component

中的结果

export class AppComponent {
    public students : Student[];
    constructor(private _rosterService : RosterService) {
       _rosterService.getRoster().subscribe(students => this.students = students);
    }
 }

此外，最好通过实施 OnInit 界面在 ngOnInit 中调用该服务。

Angular 2可注入异步执行

1 个答案: