Kendo Angular2 MultiSelect不绑定到返回的响应

Question

我正在构建一个Angular2应用程序，在其中一个页面上我们有MultiSelect组件。在输入最少3个字符时，它会进行Web服务调用并开始显示可能的匹配项。当我们在MultiSelect中选择项目并保存时;我正在保存表格中所选项目的ID，只是为了从多选中保存选定的ID。要在我的web api调用中检索数据，我将返回具有所有信息的对象类型，以显示我之前在MultiSelect中保存的内容，其中包括Code以及CPTdata中的其他支持字段

我的问题是当我浏览到我有MultiSelect控件的页面时，所选值不会绑定/显示到控件。我查看了web api响应并验证所选值以及支持字段是否存在。是否还需要完成其他步骤以显示我之前选择的已保存值？

这是我的HTML代码：

<kendo-multiselect id="txtCptCode"  #CptCodemultiselect
                             [filterable]="true"
                            (filterChange)="handleCptFilter($event)"
                             [data]="CPTdata"
                             [textField]="'Code'"
                            (valueChange)="CptValueChange($event)"
                             [valueField]="'CptId'"
                             [(ngModel)]="Model.CPTCodes">
         </kendo-multiselect>

这是handleCptFilter

handleCptFilter(value: any) {
      if (value.length >= 3) {
          this.cptRequest.value = value;
          this._surgeryRequestFormService.getCPTByCodeOrDesc1(this.cptRequest).subscribe(
              data => {
                  this.CPTdata = data;
              },
              error => {
                  console.log("Error", error);

              }
          )

      }
      else {
          console.log("Do nothing");
      }

};

这是CptValueChange

public CptValueChange(value: any): void {
    var _this = this;
    var model = new surgeryReservationModel();

    if ((this.CPTdata != null) && (value != null || undefined || "")) {
        for (let entry of this.CPTdata) {
            for (let selectedCPT of value) {
                if (entry.Code == selectedCPT.Code) {
                    var CPTDescription;
                    if (_this.Model.CPTDescription != null)
                    {
                        CPTDescription = _this.Model.CPTDescription;
                        _this.Model.CPTDescription = (CPTDescription + "\n" + entry.ShortDescription);
                    }
                    else if (_this.Model.CPTDescription == null)
                    {
                      _this.Model.CPTDescription = entry.ShortDescription;
                    }

                    //    _this.surgeryReservationModel.CPTCodeId = entry.CptId;
                    console.log("CPT Description is " + "" + _this.Model.CPTDescription);
                    break;
                }
            }
        }
        console.log("valueChange", value);
    }
}

Answer 1

作为Kendo documentation notes，

默认情况下，按下Enter键或组件失去焦点后，将忽略未在提供的项目列表中显示的值。

我在kendo-combobox遇到了同样的问题：如果以前选择的项目显示，则使用API​​更改填充控件中的项目。更改搜索文本并选择一些内容，您选择的项目可能会消失。

缺乏：

1. 使用另一个行为符合你想要的角度控件，或者
2. 添加另一个控件以显示所有已选择的项目，

...推荐的Telerik方法是使用[allowCustom]=true然后写一个valueNormalizer函数来添加缺少的虚拟项目。

// (pseudocode here)
valueNormalizer(text Observable<string>){
   if(text not in itemList){
      itemList.append({ text: text, value: text });
   } else {
      return {
      value: this.listItems[this.listItems.length - 1].value + 1, 
      text: text
      }
   }
}

我正在抛开关于这个功能是否有意义的讨论 - 这就是你如何做到的！