Javascript 我正在寻找一种在Angular 7项目中使用剑道来实现多列下拉列表框的方法

我正在尝试重新创建在以下链接中找到的多列剑道下拉列表

我已经能够使用下面的代码重新创建它的大部分，但是它不能正确显示数据

    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-tablebox',
    //  templateUrl: './tablebox.component.html',
      styleUrls: ['./tablebox.component.scss'],
      template: `
      <div>
      <kendo-dropdownlist style="width:400px;"
        [defaultItem]="defaultItem"
        [data]= "data"
        [textField]= "'band'"
        [valueField]= "'id'"

      > 
    <ng-template kendoDropDownListHeaderTemplate>
                        <table>
                          <tr class="combo-tr">
                            <td class="combo-hd-td">Band</td>
                            <td class="combo-hd-td">Song</td>
                            <td class="combo-hd-td">Album</td>
                          </tr>
                      </table>
    </ng-template>
    <ng-template kendoDropDownListValueTemplate let-dataItem>
                      <span>
                        <table>
                          <tr class="combo-tr">
                            <td class="combo-td">{{dataItem.band}}</td>
                            <td class="combo-td">{{dataItem.song}}</td>
                            <td class="combo-td">{{dataItem.album}}</td>
                          </tr>
                      </table>
                    </span>                  
    </ng-template>

      </kendo-dropdownlist>

    </div> `
    })

    export class TableboxComponent {

      public defaultItem: { text: string, value: number } = { text: "Select item...", value: null };

      public data = [
        { id: 1, band: "Iron Maiden", song: "Wasted Years", album: "Ed Hunter" },
        { id: 2, band: "Metallica", song: "Enter Eandman", album: "Metallica" },
        { id: 3, band: "Mr. Big", song: "Seven Impossible Days", album: "Japandemonium" },
        { id: 4, band: "Unknown Band", song: "Some Song", album: "The Album" }
      ];



      constructor() { }

    }

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“应用程序表框”，
//templateUrl:'./tablebox.component.html'，
样式URL:['./tablebox.component.scss']，
模板：`
乐队
歌曲
专辑
{{dataItem.band}
{{dataItem.song}
{{dataItem.album}
`
})
导出类TableboxComponent{
公共默认项：{text:string，value:number}={text:“选择项…”，value:null}；
公共数据=[
{id:1，乐队：“铁娘子”，歌曲：“虚度光阴”，专辑：“埃德·亨特”}，
{id:2，乐队：“Metallica”，歌曲：“Enter Eandman”，专辑：“Metallica”}，
{id:3，乐队：“大先生”，歌曲：“七个不可能的日子”，专辑：“Japandemonium”}，
{id:4，乐队：“未知乐队”，歌曲：“一些歌曲”，专辑：“专辑”}
];
构造函数（）{}
}

该组件显示如下：

提前谢谢

---

Mike

您应该使用

KendoDropDownlistEmplate

而不是

kendoDropDownListValueTemplate

kendoDropDownListValueTemplate

是用于选择项目后出现在下拉列表中的项目的模板

---

kendoDropDownListItemTemplate

是用于列表中项目的模板。

您应该使用

kendoDropDownListItemTemplate

而不是

kendoDropDownListValueTemplate

kendoDropDownListValueTemplate

是用于选择项目后出现在下拉列表中的项目的模板

kendoDropDownListItemTemplate

是用于列表中项目的模板