angular - Varför ERROR TypeError: Kan inte läsa egenskaper av undefined (läser 'length')?

Varför renderar komponenten korrekt men webbläsarkonsolen visar detta fel?

FEL TypeError: Kan inte läsa egenskaper på undefined (läser 'length')

Tack på förhand! :)

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>

Svar #1

Felmeddelandet

FEL TypeError: Kan inte läsa egenskaper på undefined (läser 'length')

ber dig att värdet på expertList vid en tidpunkt är undefined.

Så vi kan bara anta men sannolikheten är hög att värdet av expertList laddas via ett asynkront anrop. Det betyder att så länge anropet inte har returnerat, förblir värdet av expertList odefinierat.

För att bli av med felet behöver du justera villkoret i din *ngIf.

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

Genom att lägga till en ? stoppas exekveringen av uttrycket om ett null eller undefined värde uppstår, så felmeddelandet uppstår inte längre. Detta kallas valfri kedjning.

Svar #2

Det kan bero på att expertList inte är tillgänglig när komponenten laddas. Hämtar du det värdet via HTTP eller något liknande? Om så är fallet kan du göra tre saker.

I din komponents konstruktor, initiera variabeln expertList med en tom array. expertList=[]

Du kan ha en variabel isLoad som börjar med false i konstruktorn och när hämtningen slutar blir true. Denna variabel bör användas i 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>

Eller så kan du bara kontrollera att expertList inte är undefined (med ?).

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

Relaterade artiklar