Truy cập phần tử trong mảng không đồng bộ

Question

Tôi có một ứng dụng angularjs2 nhận danh sách các jsons từ dịch vụ firebase của tôi. Tôi muốn truy cập và hiển thị phần tử đầu tiên của danh sách.

Dưới đây là những gì tôi đã cố gắng

<h1>{{(chapters | async)?[0].title}}</h1> 

mà mang lại cho tôi một lỗi Mẫu phân tích cú pháp.

Làm cách nào để truy cập phần tử đầu tiên của mảng không đồng bộ?

Answer 1

Bạn có thể sử dụng ống như thế này:

@Pipe({ 
    name: 'first' 
}) 
export class First { 
    transform(val, args) { 
    if (val === null) return val; 
    return val[0]; 
    } 
} 

và trong html của bạn

<h1>{{ (chapters | async | first)?.title }}</h1> 

Plunker Example

Answer 2

? (an toàn-navigation) chỉ làm việc với . (toán tử tham chiếu) không phải với (toán tử truy cập index) []

gì có thể làm việc là

<h1>{{(chapters | async)?.length && (chapters | async)[0].title}}</h1> 

nhưng tôi không chắc chắn nếu chapters là đã đăng ký hai lần. Trong trường hợp này, đây sẽ không phải là một giải pháp tốt. Angular2 thực hiện một số trùng lặp trong các kết buộc mẫu nhưng không chắc chắn về | async.

cách tiếp cận khác sẽ được gán kết quả vào một tài sản

ngOnInit() { 
    this.chapters.subscribe(val => this.captersResult = val); 
} 

<h1>{{(chaptersResult?.length && chaptersResult[0].title}}</h1> 

} 

Answer 3

tôi sẽ làm điều đó như thế này:

<h1>{{((chapters | async) || [])[0]?.title}}</h1>

Đó là một giải pháp chung chung hơn, làm việc cho bất kỳ chỉ số, không chỉ đầu tiên.