Truy cập phần tử mảng cụ thể trong một Mẫu Angular2

Question

Tôi có một mảng mà tôi có thể lặp qua sử dụng cú pháp ng-for. Tuy nhiên, cuối cùng tôi muốn truy cập chỉ là một phần tử duy nhất của mảng đó. Tôi không thể tìm ra cách để làm điều đó.

Trong kịch bản thành phần của tôi, tôi có

export class TableComponent { 

    elements: IElement[]; 

} 

Trong mẫu của tôi, tôi có thể lặp qua các yếu tố qua

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

Tuy nhiên, cố gắng truy cập vào một mục trong mảng phần tử bằng cách secifically tham chiếu một mục sử dụng

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

dường như không hoạt động.

Định dạng trong mẫu khá rõ ràng, vì vậy tôi muốn có thể truy cập từng thành phần của mảng một cách rõ ràng trong mẫu.

Tôi không hiểu điều gì đó cơ bản ....

Answer 1

{{elements[0].name}} 

chỉ nên làm việc. Nếu bạn tải elements không đồng bộ (từ máy chủ hoặc tương tự) thì Angular không thành công khi cố gắng cập nhật ràng buộc trước khi phản hồi từ máy chủ đến (thường là trường hợp đó). Bạn sẽ nhận được thông báo lỗi trong bảng điều khiển trình duyệt.

Hãy thử thay

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

Answer 2

làm việc xung quanh, sử dụng ngIf kiểm tra độ dài. yếu tố? có nghĩa là nếu các phần tử là rỗng, không đọc thuộc tính chiều dài.

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