在Angular 2中使用異步管道訪問第一個數組項目

Question

如何在使用異步管道時訪問數組的第一項？

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

我試過(pageTabs$ | async)[0]但它沒有工作。

Answer 1

發現一個更簡單的方法（不創建自定義管道）：添加一個map到observable。

component.ts

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

component.html

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

Answer 2

您必須創建自定義管道，這將從數組中獲取第一項，(pageTabs$ | async)不是數組。

Answer 3

我只想寫一個新的getter在您的組件代碼：

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

，然後用它：

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

或者你可以在你的資產淨值的標籤組件做到這一點：

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