Скрыть / показать параметры optgroup (угловой материал) одним щелчком мыши

Question

У меня есть список вмешательств, interv1, interv2, interv3 ... для каждого из этих вмешательств, у меня есть список элементов, он дает следующее:

<mat-optgroup *ngFor="let interv of listIntervDiag" [label]="interv.name" [disabled]="interv.disabled">
         <mat-option *ngFor="let element of interv.listElement" [value]="option">
                      {{ element }}
         </mat-option>
</mat-optgroup>

Я хотел бы сделатьдерево (как здесь https://material.angular.io/components/tree/overview), но в элементе select.

В начале я показываю только свою OptGroup, при нажатии на один из этих параметров группы, я хочу показать список связанных элементовк (варианты)

Возможно ли это сделать?

возможно, нет ... Я думаю, что решение может быть сделать 2 выбора, и в соответствии с выбором первого выберите егоПоказывает элемент дифференциалов во втором (который отключен, если в первом ничего не выделено).

Спасибо за вашу помощь

Answer 1

В теге mat-option

[class.active]="i === activeClassIndex"

В теге mat-optgroup

*ngFor = "let interv of listIntervDiag let i = index;" (click)="activeToggler(i)"

В файле .ts

activeToggler(selectedIndex) {
    this.activeClassIndex = (this.activeClassIndex == selectedIndex) ? null : selectedIndex;
   }

в файле .css

.mat-optgroup {
    .mat-option {
         display: none;
          &.active {
              display: flex !important;
          }
    }
 }