Question

我正在构建一个Angular2应用程序，其中一个页面上有MultiSelect组件。在输入最少3个字符时，它会进行Web服务调用并开始显示可能的匹配项。当我们在MultiSelect中选择项目并保存时;我正在保存表格中所选项目的ID，只是为了从多选中保存选定的ID。要在我的web api调用中检索数据，我将返回具有所有信息的对象类型，以显示我之前在MultiSelect中保存的内容，其中包括代码以及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键或组件失去焦点后，未提供在提供的项目列表中的值将被取消。

我遇到与inline相同的问题：如果先前选择的项目显示，则使用API更改填充控件中的项目。更改搜索文本并选择一些内容，您选择的项目可能会消失。

缺少：

使用另一个行为符合您需要的Angular控件，或
添加另一个控件以显示所有已选择的项目

......推荐的Telerik方法是使用public static void main(String[] args) { Scanner in = new Scanner(System.in); ArrayList<Integer> list = new ArrayList<>(); System.out.println("Enter some numbers:"); while (in.hasNextInt()) { list.add(in.nextInt()); } System.out.println("ArrayList Before: "+ list); Collections.swap(list, 0, 1); System.out.println("ArrayList After: "+ list); }然后编写kendo-combobox函数来添加缺少的虚拟项目。

[allowCustom]=true

我暂时搁置有关此功能是否有意义的讨论 - 这就是你如何做到的！

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

1 个答案: