Angular 4 instance variable is undefined inside a method

Question

I have this code

@Component({
  selector: 'unb-navbar',
  templateUrl: './navbar.html'
})
 export class NavbarComponent implements OnInit  {

@Input() brand: string;

controlador:boolean=false;
overlay:string="";

@Input() menus:any = [{
  name: 'Início',
  icon: 'home',
  router: 'home',
  path:'home'
}];

private html: string ='';


constructor(private http: Http, private router: Router, private authenticationService: AuthenticationService, private navbarService: NavbarService){

}

ngOnInit() {
    //this.carregarMenuDinamico();
}


carregarMenuDinamico(){
    this.authenticationService.getUrlFromBarramento()
        .subscribe(res=> {
                this.navbarService.createTemplate (AuthenticationService.base_url)
                    .subscribe (res => {
                        this.html = res;
                    });
            },
            error => {
                this.authenticationService.getUrlFromConfig()
                    .subscribe(response =>{
                        this.navbarService.createTemplate (AuthenticationService.base_url)
                            .subscribe (res => { 
                                this.html = res;
                            });
                    });
            });
}

carregarBars(){
  if(this.controlador){
    this.controlador =false;
    this.overlay = "none";
  }else{
    this.controlador =true;
    this.overlay = "block";
  }

}

}

When this line is execute this.html = res; the this.html is undefined always, and I don't know why.

The code compile correctly with webpack and this method run without erros but never atribute any value to this.html is ever undefined.

I try to put a console.log but this happen:

this thing apears in debug in chrome

debug in chrome

But this thing appen when coneols.log this variables

use console.log in res and this.html

But nothing change in . And i don't know why.

If it's undefined, it means that res is also undefined, which means that navbarService.createTemplate() returns an Observable emitting undefined. You should use switchMap() instead of subscribing inside a subscribe callback. I also have a hard time understanding the point of calling this.authenticationService.getUrlFromXxx, since you don't doanything with the event it emits. — JB Nizet
– JB Nizet, Commented Aug 17, 2017 at 14:47
when is it showing undefined ?where are you trying to use this.html ? — Vikhyath Maiya
– Vikhyath Maiya, Commented Aug 17, 2017 at 14:50
The return of variable res "<li class="active"> <a ng-reflect-router-link="/categoriaperguntalist" href="#/categoriaperguntalist"><i class="material-icons">chrome_reader_mode</i></li>" but is never atached to this.html, because it's always undefined. I think it's a bug in Angular 4. — Renato Carauta Ribeiro
– Renato Carauta Ribeiro, Commented Aug 17, 2017 at 14:50
And this this.authenticationService.getUrlFromXxx, because i need to authenticate url from user it's part of a code for implement oauth2 in client, but it's work correct. Only this line doesn't work this.html = res; — Renato Carauta Ribeiro
– Renato Carauta Ribeiro, Commented Aug 17, 2017 at 14:54
So, you print res before calling this.html = res;, and it displays something, and if you add console.log(this.html)right after that line of code, it prints undefined? I find it hard to believe. Please do that, and tell what is printed. I.e. replace this.html = res;by console.log('res = ' + res); this.html = res; console.log('html = ' + this.html);. — JB Nizet
– JB Nizet, Commented Aug 17, 2017 at 14:57

S_developer · Accepted Answer · 2017-08-17 14:54:32Z

0

 this.authenticationService.getUrlFromBarramento()
        .subscribe(res=> {
                this.navbarService.createTemplate (AuthenticationService.base_url)
                    .subscribe (res => {
                        this.html = res;
                    });
            },

This might be trivial, but I think you need to use two different variables for the callback when you are chaining up two observables like res1 when you are subscribing for getUrlFromBarramento() and res2 or something else for createTemplate.

answered Aug 17, 2017 at 14:54

S_developer

2625 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Renato Carauta Ribeiro Over a year ago

I changed name of variable but stil don't work correct.

Collectives™ on Stack Overflow

Angular 4 instance variable is undefined inside a method

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related