在前端开发中，我们经常会遇到搜索框的需求，Angular 的表单也提供了 ngModel 指令来实现数据双向绑定。但是，在使用 ngModel 进行搜索时，可能会遇到搜索项搜索不出来的问题。这是由于 TypeScript 对字符串（string）和数字（number）的比较方式不同，导致 TS 判断条件失效。

以下是一个简单的搜索组件示例，结合使用 input 框、ngModel 指令以及 Filter 来实现搜索功能。假如我们在 input 输入框中输入搜索关键字，即可进行搜索。

ts：

export class SearchComponent implements OnInit {
  items: any[] = [
      { name: 'Angular', id: 1 },
      { name: 'React', id: 2 },
      { name: 'Vue', id: 3 },
      { name: 'AngularJS', id: 4 }
    ];
  searchTerm: string = '';
 
  constructor() { }
 
  ngOnInit() { }
 
  search() {
    if (this.searchTerm) {
      this.items = this.items.filter(term => {
        return term.name.indexOf(this.searchTerm) !== -1;
      });
    };
  };
};

html：

search


  
{{ item.name }}

在上面的代码示例中，若使用中文搜索“AngularJS”，则会发现搜索结果为空。这是由于 indexOf () 方法进行字符串匹配时，并不会对大小写进行区分，因此 “angularjs” 与 “AngularJS” 不同，indexOf() 方法并不返回 0 。

解决办法是使用 toLowerCase() 方法对大小写进行统一。修改 search 函数中的 return 语句：

this.items = this.items.filter(term => {
  return term.name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) !== -1;
});

改写后的函数将字符串全部转化为小写，并使用 indexOf() 方法进行比较，实现了大小写不敏感的搜索。