Zugriff auf ein Element in einem asynchronen Array

Question

Ich habe eine App angularjs2, die eine Liste von jsons von meinem Firebase-Dienst erhält. Ich möchte auf das erste Element der Liste zugreifen und es anzeigen.

Hier ist, was ich versucht habe,

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

, die mir eine Vorlage Parse-Fehler gibt.

Wie greife ich auf das erste Element eines asynchronen Arrays zu?

Answer 1

Sie Rohr wie folgt verwenden können zuweisen:

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

und in Ihrem HTML

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

Plunker Example

Answer 2

? (safe-Navigation) funktioniert nur mit . (Dereferenzierungsoperator) nicht mit [] (Index-Zugriffsoperator)

Was

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

ist funktionieren könnte, aber ich bin nicht sicher, ob chapters ist doppelt abonniert. In diesem Fall wäre das keine gute Lösung. Angular2 führt eine Deduplizierung in den Vorlagenbindungen durch, ist sich aber nicht sicher über | async.

würde Ein anderer Ansatz, das Ergebnis auf eine Eigenschaft

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

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

} 

Answer 3

ich es so tun würde:

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

Es ist eine generische Lösung, arbeitet für einen Index, nicht nur zuerst.