NgxTypeAhead抛出list.filter is not a function错误求助

问题描述 #

参考示例实现本地数据的Typeahead自动补全，在组件模板中添加了带ngxTypeahead指令的输入控件，但运行时触发ngx-typeahead.js第332行createListSource方法报错，该方法代码如下：

createListSource(list, query) {
    const sanitizedQuery = this.taCaseSensitive ? query : query.toLowerCase();
    const fieldsToExtract = this.taListItemField;
    return of(list.filter((item) => {
        return resolveItemValue(item, fieldsToExtract, this.taCaseSensitive).includes(sanitizedQuery);
    }));
}

我使用的模板代码：

<input [value]="search1"
        ngxTypeahead
        [taList]="myLocalList" 
        (taSelected)="selectedStatic($event)">

其中：

• [taList]：用户输入时匹配的本地数据源列表
• (taSelected)：选中建议项时触发的事件

app.component.ts和app.module.ts代码与示例完全一致，仅自定义的JSON数据源列表更长。

解决办法 #

1. 检查数据源结构并指定匹配字段 #

如果myLocalList是对象数组（而非纯字符串数组），必须通过[taListItemField]指定要用于匹配的对象属性。比如数据源是[{label: '示例1'}, {label: '示例2'}]，模板需修改为：

<input [value]="search1"
        ngxTypeahead
        [taList]="myLocalList" 
        [taListItemField]="'label'"
        (taSelected)="selectedStatic($event)">

2. 确保数据源初始化完成 #

避免myLocalList初始为undefined或null，在组件类中先初始化空数组：

myLocalList: any[] = [];

异步加载数据后再赋值给myLocalList，确保指令执行时数据源已存在。

3. 过滤数据源中的无效项 #

如果数据源包含null、undefined或格式异常的项，会导致resolveItemValue执行失败，提前过滤：

// 假设数据源是对象数组，过滤掉无目标字段的项
this.myLocalList = rawJsonData.filter(item => item && item.label);

4. 处理空查询的边界情况 #

当输入框为空时，query可能为null，导致query.toLowerCase()报错。确保组件中绑定的search1初始化为空字符串：

search1 = '';

内容的提问来源于stack exchange，提问作者Peter The Angular Dude