如何将对象从服务返回到角度2的组件?

时间:2016-11-15 19:19:35

标签: angular return observable subscribe

我想从atom.service获取结果数组到atom.component。我以为我可以将结果数组引入atom.component,其源代码如下(未显示整个代码)。但我发现我无法从下面的源代码访问atom.component中的this.atoms。 atom.service.ts中的results数组已成功创建。如果有人知道如何在atom.component中访问结果数组,你能给它一些指导吗?

atom.service.ts

getAtoms(private newConcept: string) {
    this.http.get('api/atoms.json')
    .map( (responseData) => {return responseData.json()})
    .subscribe( data => {   
        let results:Array<RAtom> = [];
        for (i = 0; i < data.result.length; i++) { 
            results.push(new RAtom(data.result[i].classType, data.result[i].ui));
        }
        return results;
    });
}

atom.component.ts

atoms: Array<RAtom>;

searchAtoms(newConcept: string) {
    if (newConcept) {
    this.atoms = this.service.getAtoms(newConcept);
    }
}

RAtom.ts

export class RAtom {
    classType: string;
    ui: string;

    constructor(classType: string, ui:string) {
      this.classType = classType;
      this.ui = ui;
    }
}

1 个答案:

答案 0 :(得分:2)

您无法从异步执行中恢复同步执行。

而不是在getAtoms()中订阅让调用者订阅,然后他可以传递一个在数据到达时调用的回调:

getAtoms(private newConcept: string) {
    return this.http.get('api/atoms.json')
    .map( (responseData) => {return responseData.json()})
    //.subscribe( data => {   
    .map( data => {    
        let results:Array<RAtom> = [];
        for (i = 0; i < data.result.length; i++) { 
            results.push(new RAtom(data.result[i].classType, data.result[i].ui));
        }
        return results;
    });
}
atoms: Array<RAtom>;

searchAtoms(newConcept: string) {
    if (newConcept) {
      this.service.getAtoms(newConcept)
      .subscribe(result => this.atoms = result;
    }
}