我正在构建一个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);
}
}
默认情况下,按下Enter键或组件失去焦点后,将忽略未在提供的项目列表中显示的值。
我在kendo-combobox
遇到了同样的问题:如果以前选择的项目显示,则使用API更改填充控件中的项目。更改搜索文本并选择一些内容,您选择的项目可能会消失。
缺乏:
...推荐的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
}
}
}
我正在抛开关于这个功能是否有意义的讨论 - 这就是你如何做到的!