filter - Angular6 过滤器
问题描述
我正在尝试在 Angular 6 中构建一个过滤器管道,但它无法正常工作。
.html
<form>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="searchString" placeholder="Type to search..." [(ngModel)]="searchString">
</div>
</div>
</form>
<table class="table">
<tr *ngFor="let user of users | filter2 : searchString">
{{user.name}}
</tr>
</table>
管道
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter2'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) return [];
if (!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter(it => {
return it.toLowerCase().includes(searchText);
});
}
}
当我在输入中写入时出现此错误:
错误类型错误:it.toLowerCase 不是函数
我究竟做错了什么?感谢您的时间!
解决方案
你可以试试。name.toString().toLowerCase().includes(searchText);
零件
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
users:any[];
constructor(){
this.users = [
{name:"John"},
{name:"Tom"},
{name:"Carlton"},
{name:"Judy"},
{name:"Ada"}
];
}
}
html
<form>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="searchString" placeholder="Type to search..." [(ngModel)]="searchString">
</div>
</div>
</form>
<table class="table">
<tr *ngFor="let user of users | filter2 : searchString">
{{user.name}}
</tr>
</table>
管道
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter2'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) return [];
if (!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter(it => {
return it.name.toLowerCase().includes(searchText);
});
}
}
推荐阅读
- python - 您如何在 python 中使 exptions 静音,但仍执行操作?
- javascript - 为什么我的 python 代码不断收到 500 内部服务器错误?
- c# - 反应式扩展简单示例不使用数字生成器
- javascript - 无法读取未定义节点的属性“then”
- vim - Vim 不在编辑窗口中加载插件,而是在帮助或其他系统窗口中加载它们
- asp.net-core - 结果因浏览器而异
- javascript - 如果collapse = false,则Jquery发送表单POST更改输入值
- c# - 在 C# 中简化 LINQ 查询
- firebase - 从 Cloud Firestore 加载数据时出错
- java - 如何更改禁用的 jToggleButton 的颜色?