我使用Angular Material选项卡显示几个带有循环ng的选项卡.
这工作正常但是现在我想在初始化时打开第二个选项卡而不是第一个选项卡.
因此,我在mat-tab-group中添加了selectedIndex属性,但它不起作用,仍然在第一个选项卡上继续打开.
这工作正常但是现在我想在初始化时打开第二个选项卡而不是第一个选项卡.
因此,我在mat-tab-group中添加了selectedIndex属性,但它不起作用,仍然在第一个选项卡上继续打开.
<mat-tab-group class="col-10 offset-1" (selectedTabChange)="onTabChanged($event)" [selectedIndex]="1">
<mat-tab label={{tab.name}} *ngFor="let tab of tabs; let index = index">
<div>
Values: {{tab.values}}
</div>
</mat-tab>
</mat-tab-group>
使用ngOnInit中服务器的服务获取变量“tabs”,如下所示：
零件
this.api.getDataset(this.route.snapshot.params["experimentid"]).subscribe(
res => {
this.tabs = res;
},err => {
console.log(err);
}
);
我认为它来自这里,因为如果我手动设置标签而不请求服务器它可以工作.像这样：
this.tabs = [{name: "X2",values: "52"},{name: "Z2",{name: "R2",values: "52"}]
解决方法
您可以在服务数据可用后设置selectedIndex.您需要进行以下更改：
>通过声明以下属性,获取组件中MatTabGroup实例的引用(模板包含mat-tab-group的组件)：
@ViewChild(MatTabGroup) tabGroup: MatTabGroup;
>然后在更新选项卡的新值时,在subscribe方法调用中设置selectedIndex
.subscribe(
res => {
this.tabs = res;
this.tabGroup.selectedIndex = 1;
},
总的来说,您的组件可能看起来有点像下面：
import {Component,OnInit,ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material';
@Component({
selector: 'tab-group-basic-example',templateUrl: 'tab-group-basic-example.html',styleUrls: ['tab-group-basic-example.css'],})
export class TabGroupBasicExample implements OnInit {
@ViewChild(MatTabGroup) tabGroup: MatTabGroup;
tabs = [];
ngOnInit() {
this.api.getDataset(experimentId).subscribe(
res => {
this.tabs = res;
this.tabGroup.selectedIndex = 1;
},err => {
console.log(err);
}
);
}
}
