Angular中Syncfusion EJS Autocomplete选中值错误问题咨询

使用Syncfusion EJS Autocomplete组件时，出现选中条目与预期不符的问题：数据源中存在名称重复的条目（如Client 1、Client 4），这些条目可通过Structure字段区分，但用户选择Structure为SPV的Client 4时，实际加载的却是Structure为BT的Client 4。

相关代码 #

HTML模板

<div class="control-section" style="margin:130px auto;width:300px">
  <ejs-autocomplete
    id="sample-list"
    #sample
    [dataSource]="countriesData"
    [autofill]="isBool"
    [fields]="fields"
    (select)='selectIssuer($event)'
    filterType="Contains"
  >
  <ng-template #itemTemplate let-data>
    <!--set the value to itemTemplate property-->
    <div class='item'>
      <div>{{data.Name}} -- {{data.Structure != 'SPV' ? 'BT' : data.Structure}}</div>      
    </div>
  </ng-template>
  </ejs-autocomplete>
</div>

TypeScript代码

/**
 * AutoComplete Highlight Sample
 */
import { Component, ViewChild } from '@angular/core';
import { AutoCompleteComponent } from '@syncfusion/ej2-angular-dropdowns';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  public countriesData = [
  { Name: 'Client 1' , Id: 'A3D49279-18DC-40FB-B843-B6207518B379', Structure: 'BT'}, 
  { Name: 'Client 1' , Id: '77ED2BD8-2309-4792-9264-01DEAFC3227E', Structure: 'SPV'},
  { Name: 'Client 2' , Id: 'BA017D4F-DD5C-4F2D-852C-DD17AF209436', Structure: 'BT'}, 
  { Name: 'Client 3' , Id: '78FCDCB9-06EA-4D9B-A352-171B1594AE24', Structure: 'SPV'},
  { Name: 'Client 4' , Id: '48C3168A-FA2A-4EF7-B184-61F18C47AB6D', Structure: 'BT'}, 
  { Name: 'Client 4' , Id: 'E734CA83-91FF-4475-B35E-BE232ACBF137', Structure: 'SPV'}
];
  public fields: Object = { value: 'Name' };
  public isBool: Boolean = true;
}

selectIssuer(_issuer: any) {    
  this.getSearchIssuer.emit({ issuer: <CombinedIssuer>_issuer.itemData, clear: false });    
}

问题根源在于当前fields配置仅以Name作为组件的标识字段，而Name存在重复，导致组件无法区分不同条目。以下两种方案均可解决：

方案一：使用唯一Id作为标识字段 #

修改fields配置，将唯一的Id设为value字段，同时指定text字段控制下拉显示内容：

public fields: Object = { 
  value: 'Id', // 用唯一的Id作为组件内部的匹配标识
  text: 'Name' // 下拉列表显示的文本内容
};

此方案下，组件会基于唯一的Id匹配选中项，不会再出现混淆。下拉列表依然显示Name，不影响用户体验，且select事件中仍能通过_issuer.itemData获取完整的条目对象。

方案二：自定义唯一组合字段 #

如果不想用Id，可以拼接Name和Structure生成唯一组合字段作为标识：

1. 给数据源添加组合字段：

public countriesData = [
  { Name: 'Client 1' , Id: 'A3D49279-18DC-40FB-B843-B6207518B379', Structure: 'BT', DisplayValue: 'Client 1 -- BT'}, 
  { Name: 'Client 1' , Id: '77ED2BD8-2309-4792-9264-01DEAFC3227E', Structure: 'SPV', DisplayValue: 'Client 1 -- SPV'},
  { Name: 'Client 2' , Id: 'BA017D4F-DD5C-4F2D-852C-DD17AF209436', Structure: 'BT', DisplayValue: 'Client 2 -- BT'}, 
  { Name: 'Client 3' , Id: '78FCDCB9-06EA-4D9B-A352-171B1594AE24', Structure: 'SPV', DisplayValue: 'Client 3 -- SPV'},
  { Name: 'Client 4' , Id: '48C3168A-FA2A-4EF7-B184-61F18C47AB6D', Structure: 'BT', DisplayValue: 'Client 4 -- BT'}, 
  { Name: 'Client 4' , Id: 'E734CA83-91FF-4475-B35E-BE232ACBF137', Structure: 'SPV', DisplayValue: 'Client 4 -- SPV'}
];

2. 修改fields配置：

public fields: Object = { 
  value: 'DisplayValue', // 用唯一的组合字段作为标识
  text: 'DisplayValue' // 下拉显示拼接后的文本
};

这种方式也能确保组件准确区分每个条目，选中时不会出现匹配错误。

内容的提问来源于stack exchange，提问作者Jawahar