访问 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

2020 编辑：

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

是空检查的新方法

原始答案： {{elements[0].name}}

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

试试吧

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

Answer 2

解决方法，使用 ngIf 检查长度。 元素？ 意味着如果元素为空，则不读取长度属性。

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