Доступ к определенному элементу массива в шаблоне Angular2

у меня есть массив, который я могу перебирать с помощью ng-for синтаксис. Однако, в конечном счете, я хочу получить доступ только к одному элементу этого массива. Я не могу понять, как это сделать.

в моем компонентном скрипте у меня есть

  export class TableComponent {

    elements: IElement[];

}

в моем шаблоне я могу перебирать элементы через

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

однако, пытаясь получить доступ к элементу в массиве элементов, используя ссылку на элемент

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

не кажется работа.

форматирование в шаблоне довольно явное, поэтому я хочу иметь доступ к каждому элементу массива явно в шаблоне.

Я не понимаю чего-то базового....

10
angular angular2-template javascript

2 ответов

{{elements[0].name}}

должны просто работать. Если вы загрузите elements async (с сервера или аналогичного) затем Angular терпит неудачу, когда он пытается обновить привязку до того, как пришел ответ с сервера (что обычно имеет место). Однако вы должны получить сообщение об ошибке в консоли браузера.

вместо

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

работа вокруг, используйте ngIf проверьте длину. элементов? означает, что если elements имеет значение null, не читайте длина собственность.

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