Question

为什么会出现 ERROR TypeError: 无法读取未定义的属性（读取‘length’）？

2022-01-14

64197

angular typescript

为什么组件正确呈现，但浏览器控制台抛出此错误？：

错误 TypeError：无法读取未定义的属性（读取“长度”）

提前谢谢您！:)

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>

Answer 1

错误消息

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

告诉您，在某个时间点， expertList 的值是 undefined 。

因此，我们只能假设，但 expertList 的值是通过异步调用加载的，这种可能性很高。这意味着，只要调用没有返回， expertList 的值就保持未定义状态。

要消除错误，您需要调整 *ngIf 中的条件。

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

通过添加 ? ，如果出现 null 或 undefined 值，表达式的执行将停止，因此错误消息不再出现。这称为可选链。

Answer 2

可能是因为组件加载时 expertList 不可用。您是否通过 HTTP 或其他方式获取该值？如果是这样，您可以做三件事。

在组件的构造函数中，使用空数组初始化 expertList 变量。 expertList = []

您可以在构造函数中使用一个以 false 开头的变量 isLoad ，当获取结束时，该变量变为 true 。此变量应在 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>

或者您可以只检查 expertList 是否为 undefined （使用 ? ）。

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

Answer 3

只需在 ngIf 中的 expertList 后添加“？”即可。这主要是因为最初属性 expertList 未定义。因此它没有 length 属性。如果变量未定义，运算符“？”将返回 false 而不是错误

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