2017-03-20 4 views
1

routeからパラメータを取得するので、対応するタブを有効にすることができます。ng-bootでng-tabを選択する方法

データがデータベースから来ているため、ngForを使用してng-tabを生成します。 app.component.ts

export class AppComponent implements AfterViewInit{ 
    @ViewChild('t') ngbTabSet;  
    ngAfterViewInit() { 
     console.log('view init..'); 
     this.route.params 
      .subscribe((params: Params) => { 
       console.log(params); 
       //it's length was 0 at first 
       this.ngbTabSet.select(params['system']); 
      }) 
    } 
} 

しかしngbTabSetのlenghは、最初は0である

ngb-tabset(#t="ngbTabset") 
    ngb-tab(*ngFor="let item of data" id="{{item.value}}") 
     template(ngbTabTitle) 
      a([routerLink]='["../", item.value]' routerLinkActive='active' innerHTML="{{item.name}}") 
     template(ngbTabContent) {{item.value}} 

とここにある:ここではapp.component.pugです。

ngForでng-tabを使用しないようにしてください。正常に動作します。

ngForを使用すると、ビューが完全に生成されないという問題がありますか?

この問題を解決する方法はありますか?ありがとう。

答えて

1

selectメソッドを使用する代わりに、ngbタブセットでactiveIdプロパティをバインドできます。 Selectメソッドは何らかの理由で問題を引き起こしますが、activeIdバインディングが機能します。

+0

これは動作しますが、問題は私がタブデータとして観測可能なデータを使用していることです。 – Allen

関連する問題