Acceda al primer elemento de la matriz utilizando una tubería asíncrona en Angular 2 - javascript, angular

¿Cómo acceder al primer elemento de una matriz cuando se usa una tubería asíncrona?

<nav-tabs
[tabs]="(pageTabs$ | async)"
[activeTab]="(pageTabs$ | async)[0]">
</nav-tabs>

He intentado (pageTabs$ | async)[0] pero no funcionó.

Respuestas

Encontró una forma aún más fácil de hacerlo (sin crear una tubería personalizada): agregue un mapa a lo observable.

component.ts

this.activeTab$ = this.pageTabs$.map(x => x[0]);

component.html

<nav-tabs
[tabs]="(pageTabs$ | async)"
[activeTab]="(activeTab$ | async)">
</nav-tabs>

Tienes que crear una tubería personalizada que tomará el primer elemento de la matriz, (pageTabs$ | async) no es una matriz

Simplemente escribiría un nuevo getter en el código de sus componentes:

 public get activeTab$() {
return this.pageTabs$.map(tabs => Array.isArray(tabs)? tabs[0]: null;
}

y luego usarlo:

 [active-tab]="activeTab$ | async"

O puede hacerlo en su componente de pestañas de navegación:

 public get activeTab() {
return Array.isArray(this.tabs)? tabs[0]: null;
}