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

我的想法

就像我说的是即时学习，但我认为这项工作的方式类似于使用javascript的Ajax，或者可能不是正确的方法。

问题

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

注释

我真的对Angular，TypeScript和Jhipster陌生。
如果我错过了重要的事情，请在评论中让我知道，我将添加到问题中。

Answer 1

由于可观察对象的异步行为，您得到undefined。

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

因此，在调用时，您的组件代码中最终会以undefined出现

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

一个简单的解决方法是订阅组件中nombreResponsable方法返回的可观察对象。

或者甚至更好地使用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
    }
}

然后在组件标记调用方法中也异步使用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)
); }

返回在构造函数内部的服务调用中不起作用

2 个答案: