web-dev-qa-db-fra.com

Sélectionner par programme md-tab dans Angular 2

comment puis-je sélectionner un onglet spécifique lorsqu'un événement se produit? 

J'ai essayé avec [selectedIndex]="selectedTab" de changer la selectedTab pour l'index d'onglets nécessaire, mais cela ne semble pas fonctionner une fois les onglets chargés ...

angularangular-material
25
Filipe Amaral

Devrait travailler, peut-être n'importe où ailleurs un problème? Un message d'erreur?

<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;
}

démo en direct: http://plnkr.co/edit/k2cw7Jw5YEstrY3OWbdq?p=preview

34
mxii

Si cela peut aider quelqu'un, il est également possible de définir selectedIndex sur MatTabGroup dans votre composant.

Si votre code HTML a: <mat-tab-group #tabs>, vous pouvez obtenir une référence dans le composant à l'aide de @ViewChild('tabs') tabGroup: MatTabGroup;.

Ensuite, vous pouvez faire this.tabGroup.selectedIndex = newIndex; dans la fonction OnInit ou ailleurs.

1
Jon Onstott

J'ai eu le même problème et j'ai essayé les réponses ci-dessus, mais elles ne m'aident pas. Voici ma solution:

Dans mon code TypeScript, déclarez d'abord une variable:

selected = new FormControl(0); // define a FormControl with value 0. Value means index.

puis, dans la fonction:

changeTab() {
    this.selected.setValue(this.selected.value+1);
 } //

dans le 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>
0
Jingwei