angular - 如何在 Angular 2 应用程序中通过分组实现多选下拉列表？

Question

如何在我的 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;
    }
}

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

当前输出:

要求的输出:

Answer 1

试试这个带有大量属性和功能的 primeng 的多选下拉列表可能对您有所帮助。

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

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