如何自定义垫选择选项组以允许角度嵌套值

Question

我正在自定义角度材料选择/自动完成以允许嵌套下拉菜单。

在这里，我想要一个包含许多孩子的父下拉列表。如果我展开特定的父下拉列表，则只有该下拉列表的子项应该展开或折叠。同理，checkbox事件应该在同一个场景中被选中。

我面临两个问题。

1. 搜索/自动完成功能不起作用。
2. 检查父复选框应选择与其关联的所有子复选框。

有人可以帮我解决我在这里缺少的东西吗？

这是我的代码。 STACKBLITZ

参考资料：

https://stackblitz.com/edit/angular-evacck-qubgyy

https://stackblitz.com/angular/eboprqqnooy

export class SelectCustomTriggerExample {
  toppings = new FormControl();
   isExpandCategory: boolean = false;
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

  states = new FormControl();

  expandDocumentTypes(category) {
    console.log("expanding dropdown", category);
    this.isExpandCategory = !this.isExpandCategory;
  }

  stateList: StateGroup[] = [{
    letter: 'A',
    names: ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
  }, {
    letter: 'C',
    names: ['California', 'Colorado', 'Connecticut']
  }, {
    letter: 'D',
    names: ['Delaware']
  }, {
    letter: 'F',
    names: ['Florida']
  }, {
    letter: 'G',
    names: ['Georgia']
  }, {
    letter: 'H',
    names: ['Hawaii']
  }, {
    letter: 'I',
    names: ['Idaho', 'Illinois', 'Indiana', 'Iowa']
  }, {
    letter: 'K',
    names: ['Kansas', 'Kentucky']
  }, {
    letter: 'L',
    names: ['Louisiana']
  }, {
    letter: 'M',
    names: ['Maine', 'Maryland', 'Massachusetts', 'Michigan',
      'Minnesota', 'Mississippi', 'Missouri', 'Montana']
  }, {
    letter: 'N',
    names: ['Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
      'New Mexico', 'New York', 'North Carolina', 'North Dakota']
  }, {
    letter: 'O',
    names: ['Ohio', 'Oklahoma', 'Oregon']
  }, {
    letter: 'P',
    names: ['Pennsylvania']
  }, {
    letter: 'R',
    names: ['Rhode Island']
  }, {
    letter: 'S',
    names: ['South Carolina', 'South Dakota']
  }, {
    letter: 'T',
    names: ['Tennessee', 'Texas']
  }, {
    letter: 'U',
    names: ['Utah']
  }, {
    letter: 'V',
    names: ['Vermont', 'Virginia']
  }, {
    letter: 'W',
    names: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
  }];
}

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="states" multiple>
    <mat-select-trigger>
      {{states.value ? states.value[0] : ''}}
      <span *ngIf="states.value?.length > 1" class="example-additional-selection">
        (+{{states.value.length - 1}} {{states.value?.length === 2 ? 'other' : 'others'}})
      </span>
    </mat-select-trigger>

  <mat-optgroup *ngFor="let group of stateList">
          <div>
          <mat-checkbox [checked]="group.selected" (change)="toggleSelection(user)" 
            (click)="$event.stopPropagation()">
                    {{group.letter}}
                </mat-checkbox>
          <button mat-button (click)="expandDocumentTypes(group)">
            <mat-icon>keyboard_arrow_down</mat-icon>
          </button>
          </div>  
          <mat-option *ngFor="let name of group.names" [value]="name"
             [ngClass]="isExpandCategory ? 'list-show' : 'list-hide'">
            {{name}}
          </mat-option>
  </mat-optgroup>

  </mat-select>
</mat-form-field>

选择值后，它应该如下所示（+1 或 2.. 其他）。

Answer 1

这是您的第 2 点和第 3 点的答案。 https://stackblitz.com/edit/angular-f5mizr-9fpccz

1. 当展开特定的父下拉菜单时，所有子下拉菜单都在展开。 解决
2. 检查父复选框应选择与其关联的所有子复选框。 完成

对于第 1 点，您可以使用 mat-autocomplete 实现相同的解决方案，因为 mat-select 无法实现自动完成