Как выбрать конкретную вкладку, когда происходит событие?
Я попытался с помощью [selectedIndex]="selectedTab"
изменить selectedTab
на необходимый индекс вкладок, но он не работает после загрузки вкладок.
Как выбрать конкретную вкладку, когда происходит событие?
Я попытался с помощью [selectedIndex]="selectedTab"
изменить selectedTab
на необходимый индекс вкладок, но он не работает после загрузки вкладок.
Должен ли работать, может быть, где-нибудь еще проблема? Любое сообщение об ошибке?
<button md-raised-button (click)="changeTab()">Click me!</button>
<md-tab-group [selectedIndex]="selectedTab">
<md-tab label="Tab 1">Content 1</md-tab>
<md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>
changeTab() {
this.selectedTab += 1;
if (this.selectedTab >= 2) this.selectedTab = 0;
}
live-demo: http://plnkr.co/edit/k2cw7Jw5YEstrY3OWbdq?p=preview
В случае, если это кому-нибудь поможет, также можно установить selectedIndex
для MatTabGroup в вашем компоненте.
Если ваш HTML имеет: <mat-tab-group #tabs>
, вы можете получить ссылку на него в компоненте, используя @ViewChild('tabs') tabGroup: MatTabGroup;
,
Затем вы можете сделать this.tabGroup.selectedIndex = newIndex;
в функции OnInit или в другом месте.
У меня была та же самая проблема, и я попробовал вышеупомянутые ответы, но они не помогают. Вот мое решение:
В моем коде машинописи сначала объявите переменную:
selected = new FormControl(0); // define a FormControl with value 0. Value means index.
затем в функции:
changeTab() {
this.selected.setValue(this.selected.value+1);
} //
в HTML,
<mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
<mat-tab label="label0">0</mat-tab>
<mat-tab label="label1">1</mat-tab>
<mat-tab label="label2">2</mat-tab>
<mat-tab label="label3">3</mat-tab>
<mat-tab label="label4">4</mat-tab>
<mat-tab label="label5">5</mat-tab>
</mat-tab-group>
<button (click)="changeTab()">ChangeTab</button>