在Angular 2中使用异步管道访问数组的第一项

Question

使用异步管道时如何访问数组的第一项？

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

我试过(pageTabs$ | async)[0]但是没用.

Answer 1

找到了一种更简单的方法(无需创建自定义管道):将地图添加到observable.

component.ts

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

component.html

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