移除Kendo-MultiSelect选项时所有项被清空问题求助

组件配置代码 #

<kendo-multiselect
              formControlName="selectedLanguages"
              #languagesList
              (valueChange)="onSelectedLanguageChange($event)"
              [autoClose]="false"
              textField="Language"
              valueField="UseChannelLanguage"
              [data]="availableLanguages">
</kendo-multiselect>

后端数据转换逻辑 #

后端返回语言列表为string[]类型，我将其转换为指定对象数组的代码如下：

private _languages: string[];
@Input()
public get languages(): string[] {
  return this._languages;
}
public set languages(value: string[]) {
  if (value) {
    this._languages = value;

    this.availableLanguages = value.reduce((prev, curr) => {
      return [...prev, { Language: curr, UseChannelLanguage: false }];
    }, [] as PhotoSelectorLanguageFeatureLanguage[]);
  }
}

问题现象 #

组件正常渲染使用，但在多选框中移除单个选项时，所有已选选项会被全部清空，表单控件selectedLanguages直接变为空数组[]。

问题原因 #

问题根源在于valueField的配置：你指定UseChannelLanguage作为选项的唯一标识字段，但转换后的所有对象中，这个字段的值都是false。Kendo MultiSelect依赖valueField的值来区分不同选项，当所有选项的标识值完全相同时，组件无法识别单个选项，移除操作会匹配所有相同标识的选项，最终导致全部清空。

解决方案 #

方案一：改用语言名称作为唯一标识（推荐） #

直接将valueField修改为Language，因为语言名称本身就是唯一值：

<kendo-multiselect
              formControlName="selectedLanguages"
              #languagesList
              (valueChange)="onSelectedLanguageChange($event)"
              [autoClose]="false"
              textField="Language"
              valueField="Language" <!-- 修改此处 -->
              [data]="availableLanguages">
</kendo-multiselect>

转换逻辑无需修改，Language字段已经能满足组件的标识需求。

方案二：给UseChannelLanguage设置唯一值 #

如果必须保留UseChannelLanguage作为valueField，需要给每个对象的该字段赋值唯一值，比如直接复用语言名称：

private _languages: string[];
@Input()
public get languages(): string[] {
  return this._languages;
}
public set languages(value: string[]) {
  if (value) {
    this._languages = value;

    // 用map更简洁，同时给UseChannelLanguage赋值唯一的语言名称
    this.availableLanguages = value.map(lang => ({
      Language: lang,
      UseChannelLanguage: lang
    })) as PhotoSelectorLanguageFeatureLanguage[];
  }
}

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