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

标签 javascript angular angular2-template

我有一个数组,我可以使用 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}} 

是空检查的新方法

原始答案: {{元素[0].name}}

应该可以正常工作。如果你加载 elements 异步(从服务器或类似的),那么 Angular 在服务器响应到达之前尝试更新绑定(bind)时失败(通常是这种情况)。不过,您应该会在浏览器控制台中收到一条错误消息。

试试看

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

关于javascript - 访问 Angular2 模板中的特定数组元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38544503/

相关文章:

Angular 2在点击 child 时阻止点击 parent

angular - 如何将样式类添加到 p-dataTable 行

根指令上的 Angular 2 输入参数

javascript - 如何一次更改一个特征(多多边形)的颜色 - 动态样式 google API

javascript - 用 JavaScript 下载 Blob

javascript - 吞下消息 : Error: Uncaught (in promise): [object Undefined]

javascript - 在没有angularfire的情况下以 Angular 6初始化firebase

javascript datepicker 检测输入字段中更改的值

javascript - Fabricjs 在 LoadfromJson 之后应用 ClipTo

angular - 在 angular2 的 app.component.html 中使用 *ngIf 更改路由器导出