Uzyskiwanie dostępu do określonego elementu tablicy w szablonie Angular2

Question

Mam tablicę, którą można przeglądać, używając składni ng-for. Jednak ostatecznie chcę uzyskać dostęp do tylko jednego elementu tej tablicy. Nie mogę wymyślić, jak to zrobić.

W moim scenariuszu składnik Mam

export class TableComponent { 

    elements: IElement[]; 

} 

w swoim szablonie, jestem w stanie pętli poprzez elementów poprzez

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

Jednak próbuje uzyskać dostęp do elementu w tablicy elementu przez secifically odwoływanie się do pozycji z wykorzystaniemnie wydaje się działać.

Formatowanie w szablonie jest dość jednoznaczne, więc chcę mieć możliwość bezpośredniego dostępu do każdego elementu tablicy w szablonie.

ja nie rozumiejąc czegoś podstawowe ....

Answer 1

{{elements[0].name}} 

powinien po prostu pracować. Jeśli załadujesz asynchroniczny numer elements (z serwera lub podobnego), wówczas Angular nie powiedzie się, gdy spróbuje zaktualizować powiązanie przed otrzymaniem odpowiedzi z serwera (co zwykle ma miejsce). W konsoli przeglądarki powinien pojawić się komunikat o błędzie.

Spróbuj zamiast

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

Answer 2

obejść, użyj ngIf sprawdzić długość. elementów? oznacza, że ​​jeśli elementy są zerowe, nie czytaj wartości o długości długości.

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