剣道のドロップダウンリストの項目をグループ化する

Question

kendo-dropdownlistで表示するアイテムをグループ化するにはどうすればよいですか？私はgroupByとkendo-data-queryからそれを組み合わせようとしています - groupBy自体は動作しますが、エラーがなくてもリストは空（つまり、項目がありません）と表示されます。

これは私のコンポーネントである：

import { Component } from '@angular/core'; 
import { groupBy } from '@progress/kendo-data-query'; 

@Component({ 
    selector: 'app-header-channels', 
    templateUrl: './header-channels.component.html' 
}) 
export class HeaderChannelsComponent { 
    public listItems: Array<{ text: string, value: number, type: string }> = [ 
     { text: '4 Cantos', value: 1, type: 'Operators' }, 
     { text: 'CVC', value: 2, type: 'Operators' }, 
     { text: 'Channel 3', value: 3, type: 'Agencies' } 
    ]; 

    public selectedItem: { text: string, value: number, type: string } = this.listItems[1]; 

    public data; 

    constructor() { 
     this.data = groupBy(this.listItems.slice(), [{ field: 'type' }]); 
    } 

    handleFilter(value) { 
     this.data = groupBy(this.listItems.filter((s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1), [{ field: 'type' }]); 
    } 
} 

、これは私のコンポーネントのテンプレートです：

<kendo-dropdownlist 
    [data]="data" 
    [filterable]="true" 
    [textField]="'text'" 
    [valueField]="'value'" 
    [(ngModel)]="selectedItem" 
    (filterChange)="handleFilter($event)"> 
</kendo-dropdownlist> 

私はこの上で、私の頭を壊すよ...

Answer 1

私はこれをたくさん調査していて、当分の間、それをグループ化することは不可能であることが分かったこれはkendo-dropdownlistに表示されます。 kendo Ui for Angular Docsは、 "データは配列のようなリストで提供する必要があります。"

今のところ私はkendoDropDownListItemTemplateを使ってこれを処理して、結果を（視覚的に）達成することができました。

私のように私の配列内のオブジェクトへの「最初の」booleanpropertyを追加しました：

public listItems: Array<{ text: string, value: number, type: string, first?: boolean }> = [ 
    { text: '4 Cantos', value: 1, type: 'Operators', first: true }, 
    { text: 'CVC', value: 2, type: 'Operators' }, 
    { text: 'Operator 3', value: 2, type: 'Operators' }, 
    { text: 'Operator 4', value: 2, type: 'Operators' }, 
    { text: 'Channel 3', value: 3, type: 'Agencies', first: true }, 
    { text: 'Another Agency', value: 3, type: 'Agencies' } 
]; 

そして、私のテンプレート・ファイルで、私はこれをチェックしますし、それに応じてグループのタイトルを表示する：

.test-item{ 
    display: block; 
    width: 100%; 
    position: relative; 
} 
.test-item > .k-group { 
    font-size: 10px; 

    background: #ebebeb; 
    color: #3f51b5; 
    border-bottom-left-radius: 1px; 

    display: block; 
    position: absolute; 
    top: -2px; 
    right: 0; 
    padding: 0 .5em; 
    line-height: 1.8; 
} 

A：（もちろん）目的のために

<ng-template kendoDropDownListItemTemplate let-dataItem> 
    <span class="test-item"> 
    {{dataItem.text}} 
    <span class="k-group test" *ngIf="dataItem.first">{{ dataItem.type }}</span> 
    </span> 
</ng-template> 

とスタイルND私は私の希望視覚的な側面を達成：

このworkarroundの問題は、内部の配列のオブジェクトを確認し、正しくソートされ、DropDownListのデータとしてそれを定義する前に整理しなければならないことであることfirstアイテムtypeの最初のものが続き、同じものの中の他のすべてのアイテムが続きます。type