angular - 如何根据输入类型过滤项目列表中的数据,而不考虑使用 angular2 区分大小写
问题描述
我有一个搜索框,我在其中输入输入字段,如果我给出区分大小写的完整单词,过滤器就会起作用。任何人都可以根据输入的字母逐个字母来帮助过滤项目列表。
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>
管道.ts:
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;
}
}
}
解决方案
您可以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;
}
}
}
推荐阅读
- javascript - 如果值为 null 或不存在,则打印字符串
- angular - Angular SPA 在 Google PageSpeed Insights 上返回 404
- c# - C# - 输入字符串的格式不正确(Set-UserPhoto)
- ios - 不能在 SwiftUI 中使用工作表将数据添加到核心数据
- r - 在R中将日期时间转换为日期
- image-processing - 如何在具有不同地面实况和输出通道的多类分割问题中计算损失?(UNET,骰子损失)
- c# - 如何在视图上使用 asp.net mvc 中的两个模型?
- performance - prolog 怎么能只花几分钟的时间来检查一堆可能的组合中的答案呢?
- angular - 更新到 9.2.4 后 Angular/material 崩溃
- reactjs - 如何在 React 应用程序中集成 Google Pay