TypeError: Cannot read property 'something' of undefined. Angular 2

Question

i have popular error, TypeError: Cannot read property 'something' of undefined. and my code works
But why i should to use *ngIf or async? why it happens?
and can i solve this problem without this strange solutions what i describe bellow
Sorry but i can not find answer why

// service
  public getEmployee(id) {
    return this._af.database.object(`/employee/${id}`)
     .map(response => response)
     .catch(error => Observable.throw(error.json()));
  }



//component
  public employee: Employee;

  ngOnInit() {
    this.route.params
      .switchMap((params: Params) => this._EmployeesService.getEmployee(params['employeeId']))
      .subscribe(employee => {
        this.employee = employee;
      });
  }


//html
<div *ngIf="employee">...</div>` // ok
<div>{{employee?.name}}</div> // also  ok

<div>{{employee.name}}</div> // error here, TypeError: Cannot read property 'name' of undefined.

i think i can not do this, because i use type for employee object, and i haven't default object or with empty fields it will be strange, i can not do this - public employee: Employee = {}; — Limarenko Denis, Jan 09 '17 at 20:41
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Whymarrh, Jan 09 '17 at 21:03

score 1 · Answer 1 · edited May 23 '17 at 11:46

I strongly suggest you to look at this great answer: How do I return the response from an asynchronous call?

But for a short intro:

The nature of javascript is async. Some functions will take time to complete. For example you request your firebase to query the database and get a result for you. This will take some time depending on mostly your network speed. Suppose you request something from another domain, it will definitely take some time.

With this in mind, take a look at your example

You have an html binding which depends on an employee object

<div>{{employee.name}}</div>

and you request this employee object asynchronously (it will take some time to get this object) in your ngOnInit

  ngOnInit() {
    this.route.params
      .switchMap((params: Params) => this._EmployeesService.getEmployee(params['employeeId']))
      .subscribe(employee => {
        this.employee = employee; //<--- here 
      });
  }

Before you bind employee to this.employee, this.employee is empty (undefined). That is why you do all that null/undefined checks with *ngIf or the safe navigation operator (?)

ok, i agree, so is it good to use '?' operator or *ngIf, or maybe exist way to do it better, like best practice, — Limarenko Denis, Jan 09 '17 at 20:50
@LimarenkoDenis They have different use cases depending on the situation. In this case it is pretty much the same thing. — eko, Jan 09 '17 at 20:52

TypeError: Cannot read property 'something' of undefined. Angular 2

1 Answers1

Linked