Async dizisinde erişim öğesi

Question

Firebase servisimden jsons listesi alan bir angularjs2 uygulamasına sahibim. Listenin ilk elemanına erişmek ve görüntülemek istiyorum. İşte

bana bir şablon ayrıştırma hatası veriyor

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

denedim budur.

Bir async dizisinin ilk öğesine nasıl erişirim?

Answer 1

bir mülke sonucu atamak olacaktır:

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

ve html

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

Plunker Example

Answer 2

? değil [] (dizin erişim operatörü) ile (demir kasa navigasyon) sadece . (inceleyebilirsiniz operatörü) ile çalışır ne işe yarayabilecek

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

ama chapters olup olmadığından emin değilim iki kere abone oldu. Bu durumda bu iyi bir çözüm olmaz. Angular2, şablon bağlamalarında bazı tekilleştirme yapar, ancak | async hakkında emin değildir.

başka bir yaklaşım Böyle boru kullanabilirsiniz

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

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

} 

Answer 3

böyle yapacağını:

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

O daha genel bir çözüm değil sadece ilk, herhangi bir dizin için çalışır.