如何在 Angular 2 应用程序中通过分组实现多选下拉菜单？答案

【问题标题】：How to implement multiple select dropdow with grouping in angular 2 application?如何在 Angular 2 应用程序中通过分组实现多选下拉菜单？
【发布时间】：2016-12-08 17:22:00
【问题描述】：

如何在我的 Angular 2 应用程序中通过分组实现多选下拉？我需要像这个问题How can implement grouping in ng-select of Angular2? 中链接的图像一样的下拉菜单。请帮帮我.....从最近几天开始我就一直坚持这一点

我已经尝试过像下面这样的 angular-ngselect 但它的：

组件 Html：

<form [formGroup]="form" class="selector-form">
    <div class="marTop20">
        <ng-select [options]="options1"
                   [multiple]="multiple1"
                   placeholder="Select multiple"
                   formControlName="selectMultiple"
                   (opened)="onMultipleOpened()"
                   (closed)="onMultipleClosed()"
                   (selected)="onMultipleSelected($event)"
                   (deselected)="onMultipleDeselected($event)">
        </ng-select>
    </div>
</form>

ts文件中的组件代码：

export class FilterClientSelectorComponent implements OnInit {
    form: FormGroup;
    multiple1: boolean = true;
    options1: Array<any> = [];
    selection: Array<string>;
    @ViewChild('preMultiple') preMultiple;
    logMultipleString: string = '';

    constructor() {
        let numOptions = 100;
        let opts = new Array(numOptions);
        for (let i = 0; i < numOptions; i++) {
            opts[i] = {
                value: i.toString(),
                label: i.toString(),
                groupname:'a'
            };
        }
        this.options1 = opts.slice(0);
    }
    ngOnInit() {
        this.form = new FormGroup({});
        this.form.addControl('selectMultiple', new FormControl(''));
    }
    private scrollToBottom(elem) {
        elem.scrollTop = elem.scrollHeight;
    }
}

它给了我多个选择下拉列表，但没有分组：

电流输出：

所需输出：

【问题讨论】：

@silentsod 现在检查我的代码伙伴

标签： angular angular-ngselect

【解决方案1】：

试试这个primeng的多选下拉菜单，其中包含许多属性和功能可能会对您有所帮助。

http://www.primefaces.org/primeng/#/multiselect

http://www.primefaces.org/primeng/#/picklist

【讨论】：

感谢您的回复，但我无法在下拉列表中实现分组:(

【解决方案2】：

我已经使用材料设计来实现相同的功能.. 我就是这样做的.. 在“fileName.component.html”

 <mat-form-field>
  <mat-select placeholder="Pokemon" [formControl]="pokemonControl" multiple>
    <mat-option>-- None --</mat-option>
    <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                  [disabled]="group.disabled">
      <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
        {{pokemon.viewValue}}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

不要忘记添加 "multiple".. 你可以在我的 .html 文件的第二行中看到.. 而在 "fileName.component.ts"

   import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

export interface Pokemon {
  value: string;
  viewValue: string;
}

export interface PokemonGroup {
  disabled?: boolean;
  name: string;
  pokemon: Pokemon[];
}

/** @title Select with option groups */
@Component({
  selector: 'select-optgroup-example',
  templateUrl: 'select-optgroup-example.html',
  styleUrls: ['select-optgroup-example.css'],
})
export class SelectOptgroupExample {
  pokemonControl = new FormControl();
  pokemonGroups: PokemonGroup[] = [
    {
      name: 'Grass',
      pokemon: [
        {value: 'bulbasaur-0', viewValue: 'Bulbasaur'},
        {value: 'oddish-1', viewValue: 'Oddish'},
        {value: 'bellsprout-2', viewValue: 'Bellsprout'}
      ]
    },
    {
      name: 'Water',
      pokemon: [
        {value: 'squirtle-3', viewValue: 'Squirtle'},
        {value: 'psyduck-4', viewValue: 'Psyduck'},
        {value: 'horsea-5', viewValue: 'Horsea'}
      ]
    },
    {
      name: 'Fire',
      disabled: true,
      pokemon: [
        {value: 'charmander-6', viewValue: 'Charmander'},
        {value: 'vulpix-7', viewValue: 'Vulpix'},
        {value: 'flareon-8', viewValue: 'Flareon'}
      ]
    },
    {
      name: 'Psychic',
      pokemon: [
        {value: 'mew-9', viewValue: 'Mew'},
        {value: 'mewtwo-10', viewValue: 'Mewtwo'},
      ]
    }
  ];
}

如果您想了解更多信息，请查看this link

【讨论】：

【解决方案3】：

您可以使用 angular-2-dropdown-multiselect，它也有分组选项。

你必须根据这个格式化数据

    // Labels / Parents
myOptions: IMultiSelectOption[] = [
    { id: 1, name: 'Car brands', isLabel: true },
    { id: 2, name: 'Volvo', parentId: 1 },
    { id: 3, name: 'Honda', parentId: 1 },
    { id: 4, name: 'BMW', parentId: 1 },
    { id: 5, name: 'Colors', isLabel: true },
    { id: 6, name: 'Blue', parentId: 5 },
    { id: 7, name: 'Red', parentId: 5 },
    { id: 8, name: 'White', parentId: 5 }
];

https://plnkr.co/edit/3Ett6sL2emzyrM3YiHkP?p=preview

https://github.com/softsimon/angular-2-dropdown-multiselect

【讨论】：

【解决方案4】：

这是 Angular 的用于 Multiselect-dropdwon 的轻量级库。它提供了广泛的功能，如分组、搜索、自定义搜索、虚拟滚动等。您可以参考：https://cuppalabs.github.io/angular2-multiselect-dropdown/#/groupby

【讨论】：

【解决方案5】：

我使用 angular 最常用的 UI 组件创建了两个演示

使用角度材料可以查看此演示 https://stackblitz.com/edit/moa-option-group-multi-select?file=src%2Fapp%2Fselect-optgroup-example.html

使用primeng你也可以查看这个演示 https://stackblitz.com/edit/moa-primeng-multiselect-grouped

【讨论】：