访问Angular2模板中的特定数组元素

Accessing specific array element in an Angular2 Template

本文关键字：数组元素 Angular2 访问      更新时间：2023-09-26

我有一个数组，可以使用ng-for语法循环使用。但是，最终我只想访问该数组中的一个元素。我不知道该怎么做。

在我的组件脚本中，我有

  export class TableComponent {
    elements: IElement[];
}

在我的模板中，我能够通过循环浏览元素

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

但是，试图通过使用安全引用项目来访问元素数组中的项目

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

似乎不起作用。

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

我不了解一些基本的东西。。。。

2020编辑：

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

是空检查的新方法吗

原始答案：｛｛elements[0].name｝｝

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

改为尝试

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

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

<div *ngIf="elements?.length">
    {{elements[0].name}}
</div>
相关文章：