如何在 angular 2 应用程序中通过分组实现多选下拉菜单?

How can I implement multiple select drop down with grouping in my angular 2 application? I need the drop down like the images linked in this question How can implement grouping in ng-select of Angular2?. Kindly help me out.....I am stuck on this from last few daysI have tried angular-ngselect like the following but its :Component 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>Component code in ts file: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; }}And its giving me multiple select dropdown but not grouping:Current Output:Required output: 解决方案 I have used material design to implement same functionality..And This is how i did it..In "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>Don't Forget to add "multiple".. You can see that in second line of my .html file..And In "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'}, ] } ];}If you want more information on this just checkout this link 这篇关于如何在 angular 2 应用程序中通过分组实现多选下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！