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

是空检查的新方法

原回答： {{元素[0].name}}

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

试试看

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

Answer 2

变通，使用 ngIf 检查长度。 elements? 表示如果 elements 为空，则不读取 length 属性.

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

Accessing specific array element in an Angular2 Template