Question

我对角度和材质非常陌生，并且在禁用角度4材质中的非选定标签时遇到了一个难题，我在下面只提供了此代码。

    <md-tab-group class="flex-stretch tab-button-arrows">

      <md-tab *ngFor="let subject of subjects" label="subject.name" ></md-tab>

    </md-tab-group>

注意： 科目是一个动态数组。

Answer 1

您需要做的就是使用mat-tab isActive的默认属性：ReadMore

<mat-tab-group>
  <mat-tab #tab [disabled]='!tab.isActive' *ngFor="let subject of subjects" [label]="subject.name">
    {{ subject.name }}
  </mat-tab>
</mat-tab-group>

<强> WORKING DEMO

Answer 2

您可以在mat-tab中添加[disabled]标签，并附上与之相关的功能。并为每个选项卡都有一个索引。像这样：

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

然后，如果为true，则声明组件上的函数以禁用：

isSelected(index: number) {
        if (this.selectedIndex == index) {
            return false;
        } else {
            return true;
        }
    }

如何禁用angular4材质中除选定选项卡之外的所有选项卡

2 个答案: