Как отключить все вкладки, кроме выбранной вкладки в материале angular4

1

Я очень новичок в работе с угловыми и материалами и с жесткой задачей отключить не выбранные вкладки в угловом 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>

Примечание. Объекты представляют собой динамический массив.

  • 0
    Это старый материал (новый материал использует <mat-...> вместо <md-...> ), почему бы не обновить ваш материал до более новой версии?
  • 1
    @Guntram Оооо, спасибо, что напомнили мне о новой версии :)
Теги:
angular
material

2 ответа

2
Лучший ответ

Все, что вам нужно сделать, это использовать по умолчанию свойство mat-tab isActive: ЧИТАТЬ

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

РАБОЧАЯ ДЕМО

Поделиться
  • 0
    Это работает, спасибо !!! :)
  • 0
    @DaLoco, рад знать, :), что это hepled, счастливого кодирования
1

Вы можете добавить тэг [disabled] на вкладку mat-tab с функцией, связанной с ним. И иметь индекс для каждой вкладки. Что-то вроде этого:

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

Затем вы объявляете функцию на вашем компоненте отключенной, если она истинна:

isSelected(index: number) {
        if (this.selectedIndex == index) {
            return false;
        } else {
            return true;
        }
    }
Поделиться
  • 0
    Это тоже работает спасибо !!! :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню