ダイナミック/非同期タブのIonic3選択タブ

Question

私のイオン3プロジェクトでangularfire2を使用して、firebaseデータベースからデータをフェッチしています。 forループを使ってタブを作っています。今問題は、デフォルトのタブを選択していないということです。ページを表示するには自分自身をクリックする必要があります。ここに私のコードです。

tabs.html

<ion-content> 
    <ion-tabs selectedIndex="2" > 
     <ion-tab *ngFor="let tab of category|async" [root]="tabPage" tabTitle="{{tab.name}}"></ion-tab> 
    </ion-tabs> 
</ion-content> 

tabs.ts

categoryRef: AngularFireList<any>; 
category: Observable<any>; 

@ViewChild('myTabs') tabRef: Tabs; 
constructor(public db: AngularFireDatabase) { 
    this.categoryRef = this.db.list('/category'); 
    this.category = this.categoryRef.snapshotChanges().map(changes => { 
     return changes.map(c => ({ key: c.payload.key, ...c.payload.val()})); 
    }); 
    // this.tabRef.select(2) ; 
} 

Answer 1

これを試してみてください。

<ion-content> 
    <ion-tabs *ngIf="category|async"> 
     <ion-tab *ngFor="let tab of category|async" [root]="tabPage" tabTitle="{{tab.name}}"></ion-tab> 
    </ion-tabs> 
</ion-content>