Angular 无法在subscribe函数中设置全局变量
我想在变量中设置服务响应,以便在视图中使用,我的TS文件如下 MenuService是自定义服务,geMenus()是从数据库中获取所有菜单的函数Angular 无法在subscribe函数中设置全局变量,angular,typescript,Angular,Typescript,我想在变量中设置服务响应,以便在视图中使用,我的TS文件如下 MenuService是自定义服务,geMenus()是从数据库中获取所有菜单的函数 import { Component, OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { MenusService } from '../menus.service'; @Component({ sel
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { MenusService } from '../menus.service';
@Component({
selector: 'app-header1',
templateUrl: './header1.component.html',
styleUrls: ['./header1.component.css'],
providers:[MenusService]
})
export class Header1Component implements OnInit {
menus=['Login','Register','Subscribe'];
primeryMenus:any;
//menus1=['Home','Matches','Players','Teams','Tournaments','Contact Us','About Us'];
constructor(private translate: TranslateService,private _ser:MenusService) {
translate.setDefaultLang('en');
}
ngOnInit(){
this.getMenu();
}
getMenu(){
this._ser.getMenus().subscribe(res=>{
this.primeryMenus = res;
console.log(this.primeryMenus) // output is json object ( getting correct output )
});
console.log(this.primeryMenus) // output is undefined
}
switchLanguage(language: string) {
this.translate.use(language);
}
}
如何在subscribe observable中设置primaryMenu,observable是异步的。您将第二个
console.log()
放在订阅之外。在那里,它在可观察对象返回值之前很久就被处理了。只能这样做:
getMenu(){
this._ser.getMenus().subscribe(res=>{
this.primeryMenus = res;
console.log(this.primeryMenus) // output is json object ( getting correct output )
});
// never put a console(log) here if you want to see the return value of the observable above as it processed long before the Observable returns a value.
你的代码
this._ser.getMenus().subscribe(res=>{
this.primeryMenus = res;
console.log(this.primeryMenus) // output is json object ( getting correct output )
});
console.log(this.primeryMenus) // output is undefined
这是订阅的基本性质。在完成所有同步代码后,将执行回调
修理
仅在调用subscribe后使用该值 在菜单服务中
/**
* Method is used to get data
*
*/
getMenus(): Observable<any> {
this.requestURL = `url`;
return this.http.get(this.requestURL);
}
这只是因为在外部控制台日志执行之后,您从服务得到的响应。所以在那个时候,它是未定义的。 如果只想在收到响应时执行/显示某些操作,最好在subscribe方法中调用函数
getMenu(){
this._ser.getMenus().subscribe(res=>{
this.primeryMenus = res;
this.doSomething();
});
doSomething() {
console.log(this.primeryMenus);
// Do something awesome
}
subscribe是异步操作,所以最后一个console.log是excute first您会遇到什么样的错误?很高兴在这里见到您@basarat先生
getMenu(){
this._ser.getMenus().subscribe(res=>{
this.primeryMenus = res;
this.doSomething();
});
doSomething() {
console.log(this.primeryMenus);
// Do something awesome
}