Error in console but displays in browser

Question

I have a problem in my angular app that says ERROR TypeError: Cannot read property 'name' of undefined but the projects.name is displaying. How can i get rid of the error in the console.log. The data contains an object.

ngOnInit() {
    this.route.params 
      .subscribe((params: Params) => { 
      this.id = +params['id']; 
      this.projectsService = this.injector.get(ProjectsService);
      this.projectsService.getProject(this.id)
      .subscribe(
          (data:any) => {
            this.projects = data;
            console.log(data);

          },
          error => {
            alert("ERROR");
          })
      });  
}

score 1 · Accepted Answer · answered Oct 15 '17 at 09:34

1

Seems like you directly used projects.name and projects is being retrieved by ajax. This code fails because it tries to projects.name binding on initial change detection run.

In such cases Use Safe Navigation / Elvis operator

{{projects?.name}}

answered Oct 15 '17 at 09:34

Pankaj Parkar

134,766
23
234
299

score 1 · Answer 2 · answered Oct 15 '17 at 09:43

1

You can use {{projects?.name}} or you should initialize your projects... best practice is to use the interface and the class for your projects.

answered Oct 15 '17 at 09:43

Dmitry Grinko

13,806
14
62
86

Error in console but displays in browser

2 Answers2