以編程方式 select mat-tab in Angular 2 material using mat-tab-group

Question

select 事件發生時，我如何才能在特定選項卡上顯示？

我嘗試使用[selectedIndex]="selectedTab"將selectedTab更改為所需的選項卡索引，但在加載選項卡后它似乎不起作用。

Answer 1

更新（使用最新的角度+材料）

有多種方式..

1. 可能的解決方案，使用雙向數據綁定

<button mat-raised-button (click)="demo1BtnClick()">Tab Demo 1!</button>
<mat-tab-group [(selectedIndex)]="demo1TabIndex">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
    <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

public demo1TabIndex = 1;
public demo1BtnClick() {
  const tabCount = 3;
  this.demo1TabIndex = (this.demo1TabIndex + 1) % tabCount;
}

2. 可能的解決方案，使用模板變量並通過我們的點擊功能

<button mat-raised-button (click)="demo2BtnClick(demo2tab)">Tab Demo 2!</button>
<mat-tab-group #demo2tab>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

public demo2BtnClick(tabGroup: MatTabGroup) {
  if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;

  const tabCount = tabGroup._tabs.length;
  tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;
}

3. 可能的解決方案，使用@ViewChild

<button mat-raised-button (click)="demo3BtnClick()">Tab Demo 3!</button>
<mat-tab-group #demo3Tab>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

@ViewChild("demo3Tab", { static: false }) demo3Tab: MatTabGroup;

public demo3BtnClick() {
  const tabGroup = this.demo3Tab;
  if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;

  const tabCount = tabGroup._tabs.length;
  tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;
}

現場演示： https : //stackblitz.com/edit/angular-selecting-mattab?file=src%2Fapp%2Fapp.component.ts

Answer 2

如果它對任何人有幫助，也可以在組件中的 MatTabGroup 上設置selectedIndex 。

如果您的 HTML 具有： <mat-tab-group #tabs> ，您可以使用@ViewChild('tabs') tabGroup: MatTabGroup;在組件中@ViewChild('tabs') tabGroup: MatTabGroup; .

然后你可以這樣做this.tabGroup.selectedIndex = newIndex; 在 OnInit 函數或其他地方。

Answer 3

我也有類似的問題。 在我的情況下，我需要顯示用戶在離開組件之前所在的選項卡。 我通過在服務中填充當前選定的選項卡索引解決了這個問題。

在 HTML 模板上，我有這個：

<mat-tab-group [selectedIndex]="getSelectedIndex()" (selectedTabChange)="onTabChange($event)">

onTabChange 和 getSelectedIndex 的實現如下：

    getSelectedIndex(): number {
        return this.appService.currentTabIndex
    }

    onTabChange(event: MatTabChangeEvent) {
        this.appService.currentTabIndex = event.index
    }

我的服務代碼如下所示：

export class AppService {
    public currentTabIndex = 1  //default tab index is 1
}

Answer 4

我遇到了同樣的問題，我嘗試了上述答案，但沒有幫助。 這是我的解決方案：

在我的打字稿代碼中，首先聲明一個變量：

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>

Answer 5

它對我有用

    isActiveTab = 0 // First tab
    isActiveTab = 1 // Second Tab
        
       <mat-tab-group mat-align-tabs="start" 
         (selectedTabChange)="onTabChanged($event.index)"
          [selectedIndex]="isActiveTab" >
        
         <mat-tab label="One"> </mat-tab>
         <mat-tab label="Two"> </mat-tab>
            
       </mat-tab-group>

Answer 6

 @Input()selectedIndex: number | null: The index of the active tab. SelectedIndex expects a number binding as property, so you can select any tab starting from 0 to (workflow_list.length - 1) <mat-tab-group class="mt-30" [selectedIndex]="2"> <mat-tab label="{{wf.ApproverName}}" *ngFor="let wf of workflow_list"> </mat-tab> </mat-tab-group>

Answer 7

我正在使用 angular 10 並使用 ngFor 制作我的墊子選項； 在我的情況下，沒有一個解決方案不起作用，最后我發現 tabIndex 是列表中我們有 ngFor 的對象的索引；

<mat-tab-group mat-align-tabs="start" style="width: 100%;text-align: start;overflow: hidden"
                     (selectedTabChange)="setNodeInfo($event)" [(selectedIndex)]="selectedIpIndex">
        <mat-tab *ngFor="let nodeTab of nodeList" [tabIndex]="nodeTab.id">
          <ng-template mat-tab-label>
            <label>{{nodeTab.ip}}</label>
            <mat-icon class="close-btn" style="font-size: medium;z-index: 100" (click)="tabClose(nodeTab)">close
            </mat-icon>
          </ng-template>
        </mat-tab>
      </mat-tab-group>

如您所見，我在 html 中獲取每個 tabIndex 值，如下所示：

[tabIndex]="nodeTab.id"

但它不起作用並通過自己的選擇獲得列表中的位置索引。

在我的 ts 文件中，我像這樣填充 selectedIpIndex ：

this.selectedIpIndex = this.nodeList.indexOf(node);