如何在ng-bootstrap中使用ngFor選擇ng-tab

Question

我從路由中獲取參數，因此我可以激活相應的選項卡。

我使用ngFor來生成ng-tab，因爲數據來自數據庫。這裏是app.component.pug：

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.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。

我嘗試不使用ng-tab與ngFor，它工作正常。

問題是使用ngFor時不能完全生成視圖嗎？

有什麼辦法可以解決這個問題嗎？謝謝。

Answer 1

您可以嘗試在ngb tabset上綁定activeId屬性，而不是使用select方法。 Select方法由於某種原因而出現問題，但activeId綁定起作用。