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

添加到hide show response可以在您选择项目时阻止列表滚动。添加cdk virtual scrolling

  <mat-select [value]="selections | async" multiple >
    <cdk-virtual-scroll-viewport [itemSize]="10">
      <mat-optgroup *cdkVirtualFor="let interv of listIntervDiag"; let i = index;">
        <mat-label (click)="activeToggler(i)">{{interv.name}}</mat-label>
        <mat-option [class.active]="i === activeClassIndex"
        *ngFor="let childOption of interv.children" [value]="childOption">
          {{childOption.name}}
        </mat-option>
      </mat-optgroup>
    </cdk-virtual-scroll-viewport>
  </mat-select>

＆css

cdk-virtual-scroll-viewport {
  height: 256px;
}

Answer 2

在垫选项标签中

[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;
   }

in.css文件

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

通过单击隐藏/显示optgroup（角度材质）的选项

2 个答案: