Angular中Kendo DropDownList如何在textField显示id+text组合内容

你之前尝试的[textField]="'id'" + "'text'"写法无效，是因为textField只能接收数据源中单个字段名的字符串，直接拼接会生成不存在的字段名，自然无法正确显示。下面给你两种可行的解决方式：

方法一：预处理数据源，新增组合字段 #

先给数据源的每个条目添加一个包含ID和文本的组合字段，再把textField绑定到这个新字段：

组件代码 #

// 原始数据源
originalItems = [
  { id: 1, text: '选项A' },
  { id: 2, text: '选项B' },
  { id: 3, text: '选项C' }
];

// 预处理生成带组合字段的数据源
dropdownItems = this.originalItems.map(item => ({
  ...item,
  // 自定义组合格式，可根据需求调整
  displayText: `${item.id} - ${item.text}`
}));

模板代码 #

<kendo-dropdownlist
  [data]="dropdownItems"
  [textField]="'displayText'"
  [valueField]="'id'"
></kendo-dropdownlist>

方法二：使用自定义模板渲染选项 #

不用修改数据源，直接通过Kendo提供的模板指令自定义每个选项的显示内容，这种方式更灵活：

模板代码 #

<kendo-dropdownlist
  [data]="originalItems"
  [valueField]="'id'"
>
  <!-- 定义下拉列表中每个选项的显示内容 -->
  <ng-template kendoDropDownListItemTemplate let-dataItem>
    {{ dataItem.id }} - {{ dataItem.text }}
  </ng-template>

  <!-- 可选：定义选中后输入框内的显示内容（如果需要和下拉选项一致的话） -->
  <ng-template kendoDropDownListValueTemplate let-dataItem>
    {{ dataItem.id }} - {{ dataItem.text }}
  </ng-template>
</kendo-dropdownlist>

两种方法都能实现需求，你可以根据项目场景选择：如果后续多处需要用到这个组合显示，推荐用方法一；如果只是单个组件需要自定义显示，方法二更直接。

内容的提问来源于stack exchange，提问作者Piotr Szumiński