代码之家 › 专栏 › 技术社区 › CodeRonin

*ngFor无法读取未定义的属性

angular

0

CodeRonin · 技术社区 · 7 年前

嗨,我有这个界面

export interface Apartment {
  id: number;
  address: string;
  rooms: Room[];
}

此组件

export class HomeComponent implements OnInit {
  apartment: Apartment;

constructor(...) {
  // service get call to retrieve an apartment
}

ngOnInit {}

}

<h3>{{apartment.address}}</h3>
<ul>
   <li *ngFor=let room of apartment.rooms"></li>
</ul>

0 回复 | 直到 7 年前

1

2

ala 7 年前

在使用从后端检索的值时,随时添加ngIf。

 <h3 *ngIf='apartment'>{{apartment.address}}</h3>
 <ul>
    <li *ngIf='apartment' *ngFor=let room of apartment.rooms"></li>
 </ul>

2

8

Sajeetharan 7 年前

navigation operator(?)

<h3>{{apartment?.address}}</h3>
<ul>
   <li *ngFor="let room of apartment?.rooms"></li>
</ul>

3

1

Tzannetos Philippakos 7 年前

你打电话叫一个服务来取回公寓。假设您正在从服务器调用中检索,数据在调用完成之前不可用。这在你的h3中不是问题,因为它只是在数据被检索之前保持空白。然而,ngFor一旦尝试就会抛出一个异常。最简单的解决办法是在ul上加一个ngIf。。。

<ul *ngIf="apartment && apartment.length">

这将隐藏该列表,直到公寓有一个值,此时ngFor循环将能够顺利完成。