Angular 5报错：$any is not a function，自定义过滤器无法生效

看起来你在Angular 5项目里碰到了两个关联的问题，我来帮你一步步排查解决：

一、先解决ERROR TypeError: jit_nodeValue_6(...).$any is not a function错误 #

这个错误一般是模板语法不规范触发的异常JIT编译行为。看你的HTML代码，发现了一个明显的语法问题：

Filter: <input type="text" [(ngModel)]=by>

这里的[(ngModel)]绑定缺少了双引号，正确的写法应该是：

Filter: <input type="text" [(ngModel)]="by">

Angular对模板语法的解析很严格，无引号的绑定表达式会导致编译逻辑出错，进而抛出$any相关的异常。修复这个语法问题后，这个错误应该就会消失。

二、修复自定义Filter管道不工作的问题 #

你的管道逻辑本身是正确的，但有几个关键步骤可能被你忽略了：

1. 必须在NgModule中注册管道 #

Angular不会自动识别自定义管道，你需要把它添加到对应模块的declarations数组里。比如在你的根模块或者List组件所在的模块中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 别忘了导入FormsModule，因为你用了ngModel
import { FilterPipe } from './path-to-your-filter-pipe'; // 替换成你的管道实际路径
import { ListComponent } from './list.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [
    ListComponent,
    FilterPipe // 注册自定义管道
  ],
  bootstrap: [ListComponent]
})
export class AppModule { }

另外，别忘了导入FormsModule，否则[(ngModel)]也无法正常工作！

2. 初始化组件中的变量 #

在你的List组件类里，要确保初始化by变量（过滤关键词）和personList数据，避免传递undefined给管道：

import { Component } from '@angular/core';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html'
})
export class ListComponent {
  selectedPerson: string;
  by = ''; // 初始化过滤关键词为空字符串
  personList = ['Alice', 'Bob', 'Charlie', 'David']; // 示例人员列表
  select(event: Event, person: string) {
    event.preventDefault(); // 阻止a标签默认跳转行为
    this.selectedPerson = person;
  }
}

3. 可选优化：处理大小写敏感问题 #

你的管道用了startsWith，默认是大小写敏感的，如果需要支持大小写不敏感的过滤，可以修改管道逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
  transform(value: string[], args = ""): string[] {
    if (!value || !args) return value; // 处理空值情况
    const lowerArgs = args.toLowerCase();
    return value.filter(item => item.toLowerCase().startsWith(lowerArgs));
  }
}

三、额外检查项 #

• 确认你的webpack配置中angular2-template-loader和awesome-typescript-loader配置正确，确保组件模板和TypeScript代码能被正确编译。
• 执行npm clean-install清理并重新安装依赖，避免依赖版本冲突问题。

按照这些步骤修改后，你的过滤功能应该能正常工作，同时$any的错误也会消失。

内容的提问来源于stack exchange，提问作者Nenad Bulatović