如何在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的长度最初为0。

我尝试不使用ng-tab和ngFor，它运行正常。

问题是使用ngFor时视图不能完全生成？

有什么方法可以解决这个问题吗？感谢。

Answer 1

您可以尝试在ngb tabset上绑定activeId属性，而不是使用select方法。选择方法由于某种原因而出现问题，但activeId绑定有效。