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

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

试试吧

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

Answer 2

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

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