[英]How to disable all tabs except selected tab in angular4 material
I'm very new to angular and material and having a hard problem of disabling the non-selected tabs in angular 4 material and I have only this code below.我对 angular 和 material 很陌生,在禁用 angular 4 material 中未选择的选项卡方面遇到了一个难题,我只有下面的代码。
<md-tab-group class="flex-stretch tab-button-arrows">
<md-tab *ngFor="let subject of subjects" label="subject.name" ></md-tab>
</md-tab-group>
Note: The subjects is a dynamic array.注意: subjects是一个动态数组。
You can add a [disabled] tag to your mat-tab, with a function linked to it.您可以在 mat-tab 中添加一个 [disabled] 标签,并链接到一个函数。 And have a index for each tab.并为每个选项卡设置索引。 Something like this:像这样的东西:
<md-tab-group class="flex-stretch tab-button-arrows" [selectedIndex]="selectedIndex">
<md-tab [disabled]="isSelected(i)" *ngFor="let subject of subjects; let i = index" label="subject.name" ></md-tab>
</md-tab-group>
Then you declare the function on your component to disable if true:然后你在你的组件上声明函数如果为真则禁用:
isSelected(index: number) {
if (this.selectedIndex == index) {
return false;
} else {
return true;
}
}
By Default Selected Tab Will Display You Can........默认情况下,选定的选项卡将显示您可以........
<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">Conte`enter code here`nt 3</mat-tab> </mat-tab-group>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.