Angular 2+ Binding - WebAPI - Cannot read property 'Username' of undefined

Question

I'm trying to do the binding in my angular application.

On my component.html i have:

<span>{{this.test.Username}}</span>

And this is my component.ts:

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 => {                        
        this.test = new User();
        this.test = user;            
      });                 
   }
}

In reality, the binding works and the Username appears on the client side, but the problem is that the browser returns this error:

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)

Can someone help me?

Thanks in advance

Sachila Ranawaka · Accepted Answer · 2018-10-02 10:29:32Z

1

set the initial value to test

test: User = { Username : null };

Or use the optional operator in the template

<span>{{this.test?.Username}}</span>

answered Oct 2, 2018 at 10:29

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

Comments

Ali Shahbaz · Accepted Answer · 2018-10-02 10:33:38Z

0

If User is a class, initialize in constructor

 this.test = new User();

answered Oct 2, 2018 at 10:33

Ali Shahbaz

8451 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular 2+ Binding - WebAPI - Cannot read property 'Username' of undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related