Cannot read property of undefined angular 2 even when input fields are populated

Question

I have a service that gets the identity from an api as shown below.

getUserClaims() {
 return this.http.get(this.rootUrl+'/api/GetUserClaims');
}

And in my home.component.ts I invoke it as follows.

userClaims: any;
ngOnInit() {
  this.userService.getUserClaims().subscribe((data: any) => {
    this.userClaims = data; 
  });
}

And I use the userClaims in the input element of the home.component.html like so:

<div class="col s12 m8 l9" >
  <ul class="collapsible collapsible-accordion" data-collapsible="accordion">
    <li>
      <div class="collapsible-header active ">User Detail</div>
      <div class="collapsible-body">
          <div class="card ">
              <br>
                <div class="card-image" *ngIf="base64textString != null">
                  <img [src]="'data:image/jpg;base64,'+base64textString" style="padding-left: 20px; border-radius: 50%; width: 25%; height: 25%"/>
                </div>
              <div class="card-content">
                <table>
                  <tbody>
                    <tr>
                      <td><span style="font-weight:bold;">UserId </span></td>
                      <td>
                        <div class="input-field">
                            <input [disabled]="disabledInput" value="{{userClaims.UserId}}" type="text" class="validate">
                        </div>
                      </td>  
                    </tr>
                    <tr>
                      <td><span style="font-weight:bold;">Username </span></td>
                      <td>
                        <div class="input-field">
                            <input [disabled]="disabledInput" value="{{userClaims.UserName}}" type="text" class="validate">
                        </div>
                        </td>
                    </tr> .........

When I log in, I get the following error:

ERROR TypeError: Cannot read property 'UserId' of undefined

And my inputs do not show. But when I refresh, that's the time when my input elements gets populated but the error still persists in the devconsole.

Any pointers in this regard will be appreciated.

Igor · Accepted Answer · 2018-03-27 10:56:35Z

1

You should be using safe navigation operator ( ?. ) and null property paths ?

{{userClaims?.UserId}} // {{userClaims?.your_property}}

As you are trying to access the property before its available ,

another way is to use *ngIf to check if variable is not null and have values

<div *ngIf='userClaims'>
   // Put your all code within this block
</div>

edited Mar 27, 2018 at 10:56

Igor

62.5k10 gold badges111 silver badges181 bronze badges

answered Mar 27, 2018 at 10:53

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

5 Comments

stack questions Over a year ago

Thank you. I used the first suggestion. I actually tried the first suggestion before posting this question but I still got the error. The first one did the trick. But it just solved half of it. In my login, the input elements does not show and there is no error but when I refresh it, my input elements show up. Can you help me with that please.

Vivek Doshi Over a year ago

@stackquestions , can you create a demo on stackblitz , it would be better for me to debug.

stack questions Over a year ago

I would love to but I am new to web development and I don't know how to create that demo on stackblitz yet.

Vivek Doshi Over a year ago

@stackquestions , just go to stackblitz.com and click on angular then you will get the idea

stack questions Over a year ago

I will do that as soon as I get in front of the computer. Thanks.

Roberto Zvjerković · Accepted Answer · 2018-03-27 10:54:38Z

0

That happens because you're receiving your data "too late".

Angular is trying to render {{userClaims.UserId}} before your service actually returns the data.

You can either wrap your inputs in div with *ngIf="userClaims" or use safe navigation operator:

{{userClaims?.UserId}}

answered Mar 27, 2018 at 10:54

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

2 Comments

stack questions Over a year ago

If I use *ngIf="userClaims", the input field does not load even if I refresh it multiple times. I think you're right in saying that "Angular is trying to render {{userClaims.UserId}} before your service actually returns the data". Do you have an idea to delay the input fields from showing until it gets the data?

Roberto Zvjerković Over a year ago

Safe navigation operator is doing just that, delaying rendering untill the object is ready.

Collectives™ on Stack Overflow

Cannot read property of undefined angular 2 even when input fields are populated

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related