Question

嗨，我有这个界面

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>

我的问题是：chrome开发者控制台说无法读取未定义的属性“ rooms”时，地址已正确打印，因此在一种情况下，nfFor中的单元房是未定义的。我认为调用ngFor时尚未加载单元对象。为什么？如何解决这个问题？我对Angular还很陌生，我还不太清楚如何在DOM中加载组件。

Answer 1

使用安全的 navigation operator(?)

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

Answer 2

添加ng（如果您正在使用从后端检索的值）。

include

Answer 3

您致电服务部门以找回公寓。假设您正在从服务器调用中检索数据，则在调用完成之前该数据不可用。在您的h3中这不是问题，因为在检索数据之前，它一直保持空白。但是，ngFor将在尝试时立即引发异常。最简单的解决方法是将ngIf放在ul ...

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

这将隐藏列表，直到apartment具有值为止，此时ngFor循环将能够顺利完成。

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

3 个答案: