title: Angular 2+ Binding - WebAPI - Cannot read property 'Username' of undefined
body: <p>I'm trying to do the binding in my angular application. </p>
  
  <p>On my component.html i have:</p>
  
  <pre><code>&lt;span&gt;{{this.test.Username}}&lt;/span&gt;
  </code></pre>
  
  <p>And this is my component.ts:</p>
  
  <pre><code>export class NavbarComponent implements AfterViewChecked, OnInit{     
  
     test: User;
  
     constructor(private userService: UserService) {                                                 
     }   
  
     ngOnInit() {
        var currentUser = JSON.parse(localStorage.getItem('currentUser'));
        var id = currentUser.userID;        
        this.userService.getById(id).subscribe(user =&gt; {                        
          this.test = new User();
          this.test = user;            
        });                 
     }
  }
  </code></pre>
  
  <p>In reality, the binding works and the Username appears on the client side, 
  but the problem is that the browser returns this error:</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'Username' of undefined
  at Object.eval [as updateRenderer] (NavbarComponent.html:79)
  at Object.debugUpdateRenderer [as updateRenderer] (core.js:11087)
  at checkAndUpdateView (core.js:10463)
  at callViewAction (core.js:10699)
  at execComponentViewsAction (core.js:10641)
  at checkAndUpdateView (core.js:10464)
  at callViewAction (core.js:10699)
  at execComponentViewsAction (core.js:10641)
  at checkAndUpdateView (core.js:10464)
  at callViewAction (core.js:10699)
  </code></pre>
  
  <p>Can someone help me?</p>
  
  <p>Thanks in advance</p>