如何在角度2應用程序中使用分組實現多個選擇下拉菜單？

Question

如何在我的角度2應用程序中使用分組實現多個選擇下拉菜單？我需要像這個問題How can implement grouping in ng-select of Angular2?中鏈接的圖像一樣下拉。請幫我.....我被困在這從最近幾天

我試圖像下面，但其角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; 
    } 
} 

而且它給我多選dropdow n，而是不分組：

電流輸出：

需要的輸出：

Answer 1

試試這個primeng的多重選擇下拉與屬性和功能的數可以幫助你。

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

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

Answer 2

可以使用角-2-下拉-多選，它具有組選項爲好。

你根據這個

// 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