如何使用分组创建 Angular 2 多选下拉列表？答案

【问题标题】：How to create Angular 2 multi select drop-down list with grouping?如何使用分组创建 Angular 2 多选下拉列表？
【发布时间】：2018-01-16 07:45:09
【问题描述】：

您好，我正在研究 AngularJS 2。我是 AngularJS 2 的新手。我正在尝试使用复选框创建多选下拉列表。我已经下载了 npm install angular2-multiselect-dropdown。多选下拉列表工作正常。下面是我的html模板。

<angular2-multiselect [data]="dropdownListScopes" [(ngModel)]="selectedItemsScopes"
                                                  [settings]="dropdownSettingsScopes"
                                                  (onSelect)="onItemSelect($event)"
                                                  (onDeSelect)="OnItemDeSelect($event)"
                                                  (onSelectAll)="onSelectAll($event)"
                                                  (onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>
</div>
</div>

我想编辑这个下拉列表，使所有选项都应该有主菜单。我想实现分组功能。在文档中，我看不到任何分组方法。有人可以帮我实现这个吗？谢谢你。

【问题讨论】：

标签： drop-down-menu angular2-directives multi-select

【解决方案1】：

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/grouping/ 这应该会有所帮助

import { GroupResult, groupBy } from '@progress/kendo-data-query';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-multiselect
            [data]="groupedData"
            [textField]="'name'"
            [valueField]="'name'">
        </kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public data: Array<any> = [
        { name: "Pork", category: "Food", subcategory: "Meat" },
        { name: "Pepper", category: "Food", subcategory: "Vegetables" },
        { name: "Beef", category: "Food", subcategory: "Meat" }
    ];
    public groupedData: GroupResult[] = groupBy(this.data, [{field: "subcategory"}]);
}

【讨论】：