Angular 自动完成组件KendoUI显示此错误无法读取属性'；toLowerCase'；空的

我在
我从WebService获取数据，并初始化列出对象，以获取

自动完成的数据


接口：

export interface ItemComboBox {
    text: string,
    value: string
}

组成部分：

toolCodeList: Array<ItemComboBox> = [];
toolCodeSource: Array<ItemComboBox> = [];
@ViewChild("toolCode") toolCode;
constructor(...){} 
ngOnInit(){
 this.apiService.getALLToolCode().subscribe(data => {
      this.toolCodeSource = data;    
       console.log(JSON.stringify(this.toolCodeSource));
    }); 
}
handleFilterToolCode(value: any) {    
    this.toolCodeList =this.toolCodeSource.filter((s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1);
  } 

HTML:



服务：

getALLToolCode():Observable<ItemComboBox[]> {
const header = new HttpHeaders({ 'Content-Type': 'application/json' });
return this.http
  .get<ItemComboBox[]>(`${this.appConfig.apiEndpoint}/Request/GetALLToolCode`)
  .map(response => response || {})
  .catch(this.handleError);
}  

getALLToolCode（）：可观察{
const header=new-HttpHeaders（{'Content-Type'：'application/json'}）；
返回此文件。http
.get（`${this.appConfig.apidentpoint}/Request/GetALLToolCode`）
.map（response=>response |{}）
.接住（这个.把手错误）；
}  

在“自动完成”元素中键入单词时，请在控制台浏览器中显示此错误

错误类型错误：无法读取null的属性“toLowerCase”

如何解决此问题？因为您使用的是对象数组而不是字符串数组作为数据，但自动完成需要字符串数组。您应该将其映射到字符串：

handleFilter(value) {
     this.data = this.source.map(item => item.text).filter(v => v.toLowerCase().indexOf(value.toLowerCase()) !== -1);}
}

在用户界面中，
[data]=“data”
。
希望这能起作用。
当触发filterChange时会发生什么事件？此.toolCodeSource中是否有数据？你能记录吗？@JacopoSciampi filterChange是一个事件。每次用户在输入字段中键入时激发。用户可以根据传递的筛选值筛选源。@fatemefazli是。toolCodeSource有很多value@fatemefazli这一行的此问题是this.toolCodeSource.filter（（s）=>s.text.toLowerCase（）.indexOf（value.toLowerCase（））！=-1）；这是真的过滤吗？它不需要映射。因为toolCodeList有declare by ItemComboBox数组。ItemComboBox有文本字段它需要映射，因为在代码中，你给数据的数组应该是字符串数组，你给[data]的是对象数组。在Kendo UI AutoCompleteComponent中，当组件绑定到复杂数据（对象）时，定义valueField。valueField输入必须指向string类型的属性。因此，“自动完成”将从选定的数据项中提取输入，并以这种方式设置组件的值。我解决了这个问题，data webservice的问题是其中一个文本值为空
getALLToolCode():Observable<ItemComboBox[]> {
const header = new HttpHeaders({ 'Content-Type': 'application/json' });
return this.http
  .get<ItemComboBox[]>(`${this.appConfig.apiEndpoint}/Request/GetALLToolCode`)
  .map(response => response || {})
  .catch(this.handleError);
}  

handleFilter(value) {
     this.data = this.source.map(item => item.text).filter(v => v.toLowerCase().indexOf(value.toLowerCase()) !== -1);}
}