访问Angular2模板

Question

我有一个可以使用ng-for语法循环的数组。但是，最终我只想访问该数组的单个元素。我无法弄清楚如何做到这一点。

在我的组件脚本中，我有

  export class TableComponent {

    elements: IElement[];

}

在我的模板中，我可以通过

循环遍历元素

<ul>
<li *ngFor='let element of elements'>{{element.name}}</li>
</ul>

但是，尝试通过使用

分区引用项目来访问元素数组中的项目

  x {{elements[0].name}}x

似乎不起作用。

模板中的格式非常明确，因此我希望能够在模板中显式访问数组的每个元素。

我不理解基本的东西......

Answer 1

{{elements[0].name}}

应该正常工作。如果您加载elements异步（来自服务器或类似），那么当Angular在服务器的响应到达之前尝试更新绑定时（通常就是这种情况），它会失败。您应该在浏览器控制台中收到错误消息。

尝试改为

{{elements && elements[0].name}}

Answer 2

解决方法，使用ngIf检查长度。 元素？表示如果元素为null，则不要读取长度属性。

<div *ngIf="elements?.length">
    {{elements[0].name}}
</div>