如何使用 angular2 根据输入类型从项目列表中筛选数据，而不考虑大小写

Question

我有一个搜索框，我在输入字段中输入，如果我给出区分大小写的完整单词，过滤器就会起作用。 任何人都可以帮助根据输入的逐个字母过滤项目列表。

HTMl：

<mat-tab label="Active">
<mat-icon for="search">search</mat-icon>
<input type="search" [(ngModel)]="filter" name="search" class="search" placeholder="Company">
<ul>
<li *ngFor="let message of activeMessages| messagefilter: filter" (click)="showMessage(message)" [class.activeShow]="message.id == message_id">
<span>{{message.messages[message.messages.length -1].updated_at | date:'dd.MM.yyyy'}}</span>
<img style="width: 40px;" [src]="message.from_user_image || '../assets/images/msg.png'"/>
<p style="padding-top: 16px;display: inline;">{{message.from_user_name}}</p>
<p style="padding-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><b>{{message.messages[message.messages.length -1].text}}</b></p>
</li>
</ul>
</mat-tab>

管道：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'messagefilter',
pure: false
})
export class MessagePipe implements PipeTransform {
transform(items, filter) {
if (!items || !filter) {
return items;
}
return items.filter((item) => this.applyFilter(item, filter));
}
/* Function to apply filter for Messages */
applyFilter(user, filter): boolean { 
console.log(user.from_user_name.indexOf(filter))
console.log(filter) 
console.log(user.from_user_name)
if (user.from_user_name.indexOf(filter) > -1) { 
return true; 
} else{ 
return false; 
} 
}
}

Answer 1

您可以使用过滤器中的toLowerCase进行检查。

代码user.from_user_name.indexOf(filter) > -1不会检查区分大小写，因此您应该将其更改为，user.from_user_name.toLowerCase().indexOf(filter.toLowerCase()) > -1

您的管道：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'messagefilter',
pure: false
})
export class MessagePipe implements PipeTransform {
transform(items, filter) {
if (!items || !filter) {
return items;
}
return items.filter((item) => this.applyFilter(item, filter));
}
/* Function to apply filter for Messages */
applyFilter(user, filter): boolean { 
if (user.from_user_name.toLowerCase().indexOf(filter.toLowerCase()) > -1) { 
return true; 
} else{ 
return false; 
} 
}
}