訪問Angular2模板中的特定數組元素

Question

我有一個數組，我可以使用ng-for語法來循環訪問。但是，最終我只想訪問該數組的單個元素。我無法弄清楚如何做到這一點。

在我的組件腳本我有

export class TableComponent { 

    elements: IElement[]; 

} 

在我的模板，我通過

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

但是我能夠通過元素循環，試圖通過secifically元件排列在訪問一個項目引用項目利用

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

似乎並沒有工作。

模板中的格式非常明確，所以我希望能夠在模板中明確地訪問數組中的每個元素。

我不理解一些基本的東西....

Answer 1

{{elements[0].name}} 

應該只是工作。如果您加載elements異步（來自服務器或類似服務器），則Angular會在服務器響應到達前（通常是這種情況）嘗試更新綁定時失敗。不過，您應該在瀏覽器控制檯中收到錯誤消息。

嘗試，而不是

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

Answer 2

解決方法，使用ngIf檢查長度。 元素？表示如果元素爲空，則不讀取長度爲的屬性。

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