如何在angular 2应用程序中使用分组实现多个选择下拉列表?我需要像这个问题How can implement grouping in ng-select of Angular2?中链接的图像一样下拉。请帮助我.....我在最近几天坚持这个
我尝试过如下角度的ng-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;
}
}
它给了我多个选择下拉列表但没有分组:
当前输出:
必填项:
答案 0 :(得分:2)
尝试使用一个primeng的Multi Select Dropdown,其中包含许多属性和功能可能会对您有所帮助。
答案 1 :(得分:1)
您可以使用 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 }
];
答案 2 :(得分:1)
我已经使用材料设计来实现相同的功能。 而这就是我做到的.. 在“ 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>
别忘了添加“多个” 。.您可以在我的.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 :(得分:0)
这里是Angular用于Multiselect-dropdwon的非常轻量级的库。它提供多种功能,例如按组,搜索,自定义搜索,虚拟滚动等。您可以参考:https://cuppalabs.github.io/angular2-multiselect-dropdown/#/groupby
答案 4 :(得分:0)
我使用 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