[英]Programmatically select mat-tab in Angular 2 material using mat-tab-group
How can I select a specific tab when an event occurs? select 事件发生时,我如何才能在特定选项卡上显示?
I tried with [selectedIndex]="selectedTab"
changing the selectedTab
to the tab index needed but it doesn't seems to work after the tabs are loaded.我尝试使用
[selectedIndex]="selectedTab"
将selectedTab
更改为所需的选项卡索引,但在加载选项卡后它似乎不起作用。
UPDATE (using newest angular+material)更新(使用最新的角度+材料)
there are multiple ways..有多种方式..
<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;
}
<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;
}
<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;
}
live-demo: https://stackblitz.com/edit/angular-selecting-mattab?file=src%2Fapp%2Fapp.component.ts现场演示: https : //stackblitz.com/edit/angular-selecting-mattab?file=src%2Fapp%2Fapp.component.ts
In case it helps anyone, it is also possible to set selectedIndex
on the MatTabGroup in your component.如果它对任何人有帮助,也可以在组件中的 MatTabGroup 上设置
selectedIndex
。
If your HTML has: <mat-tab-group #tabs>
, you can get a reference to it in the component using @ViewChild('tabs') tabGroup: MatTabGroup;
如果您的 HTML 具有:
<mat-tab-group #tabs>
,您可以使用@ViewChild('tabs') tabGroup: MatTabGroup;
在组件中@ViewChild('tabs') tabGroup: MatTabGroup;
. .
Then you can do this.tabGroup.selectedIndex = newIndex;
然后你可以这样做
this.tabGroup.selectedIndex = newIndex;
in the OnInit function, or elsewhere.在 OnInit 函数或其他地方。
I also had similar issue.我也有类似的问题。 In my case I needed to show the tab the user was there before he left the component.
在我的情况下,我需要显示用户在离开组件之前所在的选项卡。 I solved this by stuffing the current selected tab index in a service.
我通过在服务中填充当前选定的选项卡索引解决了这个问题。
On HTML template I have this:在 HTML 模板上,我有这个:
<mat-tab-group [selectedIndex]="getSelectedIndex()" (selectedTabChange)="onTabChange($event)">
Implementation of onTabChange and getSelectedIndex are as follows: onTabChange 和 getSelectedIndex 的实现如下:
getSelectedIndex(): number {
return this.appService.currentTabIndex
}
onTabChange(event: MatTabChangeEvent) {
this.appService.currentTabIndex = event.index
}
My service code looks like this:我的服务代码如下所示:
export class AppService {
public currentTabIndex = 1 //default tab index is 1
}
I had the same issue and I tried the above answers but they are not helping.我遇到了同样的问题,我尝试了上述答案,但没有帮助。 Here is my solution:
这是我的解决方案:
In my typescript code, first, declare a variable:在我的打字稿代码中,首先声明一个变量:
selected = new FormControl(0); // define a FormControl with value 0. Value means index.
then, in the function:然后,在函数中:
changeTab() {
this.selected.setValue(this.selected.value+1);
} //
in the html,在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>
it's worked for me它对我有用
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>
@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>
I'm using angular 10 and make my mat-options with ngFor;我正在使用 angular 10 并使用 ngFor 制作我的垫子选项; in my case no one of the solutions didn't work and finally i found the tabIndex is the index of object in list that we have ngFor on it;
在我的情况下,没有一个解决方案不起作用,最后我发现 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>
as you see i get the each tabIndex value in html like this:如您所见,我在 html 中获取每个 tabIndex 值,如下所示:
[tabIndex]="nodeTab.id"
but it doesn't work and get index of position in list by its own choice.但它不起作用并通过自己的选择获得列表中的位置索引。
and in my ts file i fill selectedIpIndex like this :在我的 ts 文件中,我像这样填充 selectedIpIndex :
this.selectedIpIndex = this.nodeList.indexOf(node);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.