返回不在构造函数内调用服务

Question

概观

我正在学习Angular和Jhipster我需要在控制台中获取用户的名称才能正确显示它但是并没有真正将值返回给我需要的变量

这是功能

nombreResponsable(id){

    this.userService.findById(id).subscribe(
        (res: HttpResponse<IUser>) => { 
            console.log(res.body.login);
            return res.body.login;
        },
        (res: HttpErrorResponse) => this.onError(res.message)
    );

}

这是对函数的调用

cargarActividades(id, meta, estrategia, id_meta) {
        this.activiadesDespliegueService.findByEstrategia(id).subscribe(
            (res: HttpResponse<IActividadesDespliegue[]>) => {
                this.actividadesDespliegues = res.body;

                this.actividadesDespliegues.forEach(key => {

                    var responsable = this.nombreResponsable(key.responsableId); 
                    console.log(responsable);
                    //here is where i get null 
                    var datosActividad = {
                        meta: meta,
                        id: key.id,
                        estrategia: estrategia,
                        actividad: key.nombre,
                        fecha: key.fechaCumpliniento,
                        responsable: responsable,
                        puntacion: key.puntacion
                    };
                    this.cargarEvaluaciones(key.id);
                    this.actividadesDespliegueEstrategico.push(datosActividad);

                    this.listaDeMetas[id_meta].puntos = this.listaDeMetas[id_meta].puntos + key.puntacion;
                });
            },
            (res: HttpErrorResponse) => this.onError(res.message)
        );
    }

在控制台中我看到了这个：

 [Log] undefined (x2)
 [Log] admin
 [Log] cordinador

我的想法

就像我说即时学习，但我认为这项工作的方式类似于Ajax on javascript或者它不是正确的sintaxis。

问题

• 获取我的数据的正确方法
• 这是一个更好的方法吗？我愿意接受建议

笔记

• 我是Angular，TypeScript和Jhipster的新手。
• 如果我错过了重要的内容，请在评论中告诉我，我会添加到问题中。

Answer 1

由于observables的异步行为，你得到undefined。

nombreResponsable(id)方法在调用时调用this.userService.findById(id)。考虑到它正在返回一个可观察的，它肯定是异步的。

因此，在调用时，最终会在组件代码中使用undefined：

var responsable = this.nombreResponsable(key.responsableId); 
                    console.log(responsable);
                    //here is where i get null 

一个简单的解决方法是订阅组件中nombreResponsable方法返回的observable。

或者甚至更好地使用async / await语法。它使它更具可读性。

例如：

// mark this method async
async nombreResponsable(id){
    try {
        const res = await this.userService.findById(id).toPromise();
        return res.body.login;
    } catch (e) {
        // error handling
    }
}

然后在你的组件标记调用方法也async使用await：

async cargarActividades(id, meta, estrategia, id_meta) {
        this.activiadesDespliegueService.findByEstrategia(id).subscribe(
            (res: HttpResponse<IActividadesDespliegue[]>) => {
                this.actividadesDespliegues = res.body;

                this.actividadesDespliegues.forEach(key => {
                    // use await to wait for the response and then execute further.
                    var responsable = await this.nombreResponsable(key.responsableId); 
                    console.log(responsable);
                    //here is where i get null 
                    var datosActividad = {
                        meta: meta,
                        id: key.id,
                        estrategia: estrategia,
                        actividad: key.nombre,
                        fecha: key.fechaCumpliniento,
                        responsable: responsable,
                        puntacion: key.puntacion
                    };
                    this.cargarEvaluaciones(key.id);
                    this.actividadesDespliegueEstrategico.push(datosActividad);

                    this.listaDeMetas[id_meta].puntos = this.listaDeMetas[id_meta].puntos + key.puntacion;
                });
            },
            (res: HttpErrorResponse) => this.onError(res.message)
        );
    }

Answer 2

试试这个代码

nombreResponsable(id){

let data = this.userService.findById(id).subscribe(
    (res: HttpResponse<IUser>) => { 
        console.log(res.body.login);
        return res.body.login;
    },
    (res: HttpErrorResponse) => this.onError(res.message)
); }