等待我的函数完成返回我的值Angular

Question

我在异步问题上阻塞了我的代码。我有3个事实，1是由我的组件调用并返回一个值:

getMenu(): Observable<Menu> {
this.recupUser();
return of(this.menu);
}

这里我调用我的函数recupUser()，它做一个http get请求，我把我的数据在var:

recupUser() {
return this.loginService.recupConnectedUser().subscribe(
{
next: value =>{
this.User = value;
this.initMenu()
},
}
)

}我的var User是在initMenu()上使用的，然后我必须在我的订阅中调用这个函数来获取用户中的值。然后在initMenu()我做了一个条件:

initMenu() {
if (this.User.es = '04840') {
this.menu = {
leftMenu: [
{title: 'Title 1', id: '1', role: '/URL1'}, 
{title: 'Title 2', id: '2', role: '/URL2'},
],
rightMenu: [
{icon:'profile',tooltip:'Profile', id:'profile', role:'/'},
]
};
} else {
this.menu = {
leftMenu: [
{title: 'Title1', id: '1', role: '/URL1'}, 
],
rightMenu: [
{icon:'profile',tooltip:'Profile', id:'profile', role:'/'},
]
};

}}

，然后在最后一个函数中初始化我的菜单。我已经尝试了很多事情，但我没有达到等待，所有完成返回我的价值。我在异步原则方面有一些困难，所以欢迎任何帮助!

Answer 1

使用RXJS操作符

interface Menus {
leftMenu: {title: string, id: string, role: string}[];
rightMenu: {icon:string,tooltip: string, id: string, role: string}[];
}

在课堂上

initMenu(es: string): Menus {
return es === '04840' ?
{
leftMenu: [
{title: 'Title 1', id: '1', role: '/URL1'},
{title: 'Title 2', id: '2', role: '/URL2'},
],
rightMenu: [
{icon:'profile',tooltip:'Profile', id:'profile', role:'/'},
]
} :
{
leftMenu: [
{title: 'Title1', id: '1', role: '/URL1'},
],
rightMenu: [
{icon:'profile',tooltip:'Profile', id:'profile', role:'/'},
]
};
}
getMenu(): Observable<Menus> {
this.loginService.recupConnectedUser().pipe(
map(value => {
this.User = value;
this.menu = this.initMenu(value.es);
return this.menu;
})
);
}