如何在 angular 2 应用程序中通过分组实现多选下拉菜单? [英] How to implement multiple select dropdow with grouping in angular 2 application?
问题描述
如何在我的 angular 2 应用程序中实现多选下拉和分组?我需要像这个问题中链接的图像那样的下拉菜单
所需输出:
我已经使用 Material Design 来实现相同的功能..这就是我做到的..在 "fileName.component.html"
<mat-select placeholder="Pokemon" [formControl]="pokemonControl" multiple><mat-option>-- 无--</mat-option><mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"[禁用]="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';从@angular/forms"导入{FormControl};导出接口口袋妖怪{值:字符串;视图值:字符串;}导出接口 PokemonGroup {禁用?:布尔值;名称:字符串;口袋妖怪:口袋妖怪[];}/** @title 使用选项组选择 */@成分({选择器:'select-optgroup-example',templateUrl: 'select-optgroup-example.html',styleUrls: ['select-optgroup-example.css'],})导出类 SelectOptgroupExample {pokemonControl = new FormControl();pokemonGroups: PokemonGroup[] = [{name: '草',宝可梦:[{value: 'bulbasaur-0', viewValue: 'bulbasaur'},{value: 'oddish-1', viewValue: 'oddish'},{value: 'bellsprout-2', viewValue: 'Bellsprout'}]},{name: '水',宝可梦:[{value: 'squirtle-3', viewValue: 'Squirtle'},{值:'psyduck-4',视图值:'Psyduck'},{value: 'horsea-5', viewValue: 'Horsea'}]},{name: '火',禁用:真,宝可梦:[{value: 'charmander-6', viewValue: 'Charmander'},{value: 'vulpix-7', viewValue: 'Vulpix'},{value: 'flareon-8', viewValue: 'flareon'}]},{name: '通灵',宝可梦:[{value: 'mew-9', viewValue: 'Mew'},{value: 'mewtwo-10', viewValue: 'Mewtwo'},]}];}
如果您想了解更多信息,请查看此链接>
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 days
I 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 应用程序中通过分组实现多选下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!