CODEWITHSUNDEEP
angulartypescript
doubting
doubting

Reputation: 347

Why ERROR TypeError: Cannot read properties of undefined (reading 'length')?

Why the component is rendering correctly but the browser console throws this error?:

ERROR TypeError: Cannot read properties of undefined (reading 'length')

Thank you in advance! :)

member-profile.component.html:

  <div *ngIf="member">
  <div><img src="..\..\..\assets\images\avatar.png" alt="Avatar" style="width:60px; height: 60px;"><h3>{{ member.name}} {{member.surname}}</h3></div>
  <div><i class="fas fa-user-tie"></i><span>Role: </span>{{ member.role }}</div>
  <div><i class="fas fa-at"></i><span>Email: </span>{{ member.email }}</div>
  <div><i class="fas fa-user-tag"></i><span>Username: </span>{{ member.username }}</div>
  <div>
    <i class="fas fa-brain"></i>
    <span>Skills: </span>
    <div id="Expert" *ngIf="expertList.length > 0">
      Expert
      <span *ngFor="let skill of expertList">
        {{skill.skill}}
      </span>
    </div>
  </div>

Upvotes: 6

Views: 65593

Answers (5)

Subhajit Khasnobish
Subhajit Khasnobish

Reputation: 11

The Property doesn't have the value, check property!=undefined before calculating length

at some point the property (property.length) is undefined.

Upvotes: 0

Rafaa Ferid
Rafaa Ferid

Reputation: 178

Just Add "?" after expertList in ngIf. It is mostly because initially the property expertList is undefined. So it has not length property. the operator "?" will return false instead of error if a variable is undefined

<div id="Expert" *ngIf="expertList?.length > 0">

Upvotes: 1

Batajus
Batajus

Reputation: 6257

The error message

ERROR TypeError: Cannot read properties of undefined (reading 'length')

tells you that, at one point in time, the value of expertList is undefined.

So, we can only assume but the probability is high that the value of expertList is loaded via an asynchronous call. That means as long as the call hasn't returned, the value of expertList stays undefined.

To get rid of the error you need to adjust the condition in your *ngIf.

<div id="Expert" *ngIf="expertList?.length > 0">
  ...
</div>

By adding a ? the execution of the expression is stopped if a null or undefined value occurs, so the error message does not occur anymore. This is called optional chaining.

Upvotes: 8

Alejandro Barone
Alejandro Barone

Reputation: 2151

It can be because expertList is not available when the component load. Do you fetch that value through HTTP or something?. If so you can do three things.

On your component's constructor, initialize the expertList variable with an empty array. expertList = []

You can have a variable isLoad that starts with false on the constructor and when the fetch end, becomes true. This variable should be used on the HTML.

<div *ngIf="isLoad">
    <i class="fas fa-brain"></i>
    <span>Skills: </span>
    <div id="Expert" *ngIf="expertList.length > 0">
      Expert
      <span *ngFor="let skill of expertList">
        {{skill.skill}}
      </span>
    </div>
  </div>

Or you can just check that expertList is not undefined (with the ?).

 <div id="Expert" *ngIf="expertList?.length > 0">
      Expert
      <span *ngFor="let skill of expertList">
        {{skill.skill}}
      </span>
 </div>

Upvotes: 4

Misha Mashina
Misha Mashina

Reputation: 2113

You're probably getting the expertList value from some subscription? Seems that your html is rendering faster than the sub return, so when it hits the check for expertList.length the expertList is probably not returned yet, effectively having nothing to check the .length of. Try with *ngIf="expertList?.length > 0" instead.

Upvotes: 0

Related Questions