如何自定义垫选择选项组以允许角度嵌套值 [英] How to customize mat select option group to allow nested values in angular

问题描述

我正在自定义角度材料的选择/自动完成功能，以允许嵌套下拉列表.

I'm customizing angular material select/autocomplete to allow nested dropdowns.

在这里，我想让一个父母带很多孩子.如果我展开特定的父级下拉菜单，则只有该下拉菜单的子级才能展开或折叠.同样，应在同一情况下选择复选框事件.

Here, I wanted to have one parent dropdown with many childs. If I expand particular parent dropdown, only childs of that dropdown should expand or collapse. Similarly, checkbox event should be selected in the same scenario.

我面临两个问题.

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

有人可以帮我我在这里想念的东西吗?

Can someone help me what I'm missing here.

这是我的代码. 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 ..其他).

After selected the values, it should look like below (+1 or 2.. other).

推荐答案

以下是您的2& 3分. https://stackblitz.com/edit/angular-f5mizr-9fpccz

Here is the answer for your 2 & 3 point. https://stackblitz.com/edit/angular-f5mizr-9fpccz

1. 扩展特定的父项下拉列表时，所有子项都在扩展. 解决
2. 检查父级复选框应选择与其关联的所有子级. 完成

1. When expanding particular parent dropdown, all childs are expanding. SOLVE
2. Checking parent Checkbox should select all childs associated with it. DONE

对于第1点，您可以使用mat-autocomplete实施相同的解决方案，因为mat-select

For point 1 you can implement the same solution with mat-autocomplete because autocomplete is not possible with mat-select

这篇关于如何自定义垫选择选项组以允许角度嵌套值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！