Question

我在AutoComplete Component KendoUI中遇到问题
我从WebService获取数据，并从初始到列表对象列出AutoComplete的数据
界面：

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);
  }

记录this.toolCodeSource：

[{"text":"111","value":"1"},{"text":"121","value":"2"},{"text":"131","value":"3"},{"text":"141","value":"4"},{"text":"151","value":"5"},{"text":"161","value":"6"},{"text":"171","value":"7"},{"text":"181","value":"8"}

HTML：

<kendo-autocomplete   
  #toolCode
  [(ngModel)]="requestAttribute.toolCode"                            
  name="toolCode"
  class="form-control" 
  [filterable]="true"                              

    (filterChange)="handleFilterToolCode($event)"
    (blur)="blurToolCode()"
    [data]="toolCodeList">                                  
</kendo-autocomplete>

服务：

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);
}

当我在AutoComplete元素中键入一个单词时，请在控制台浏览器中向我显示此错误。

RROR TypeError：无法读取null的属性“ toLowerCase”

我该如何解决这个问题？坦克

Answer 1

因为您使用对象数组而不是字符串数组存储数据，但是自动完成功能需要将字符串数组映射到字符串：

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

和[data]="data"在ui中。希望这行得通。

自动完成组件KendoUI显示此错误无法读取null的属性“ toLowerCase”

1 个答案: