angular - 角度自定义管道返回表数据错误
问题描述
组件.html:
<input
type="text"
[(ngModel)]="searchText"
placeholder="search your products here"
name="searchText">
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let obj of product| filter: searchText">
<td>{{obj.id}}</td>
<td>{{obj.description}}</td>
</tr>
</tbody>
</table>
过滤器.ts:
transform(items: any, searchText: string): any[] {
if (!items || !searchText || searchText === undefined) {
return items;
}
return items.filter(items =>
items.description.toLowerCase().includes(searchText.toLowerCase));
}
控制台显示项目。描述未定义。
模型.ts:
export class products{
id: number;
description: string;
}
在页面加载之前没有错误,一旦我开始在搜索框中输入,就会显示错误。错误显示在下面的代码中。
<input
type="text"
[(ngModel)]="searchText"
placeholder="search your issues here"
name="searchText">
解决方案
你不是searchText.toLowerCase
在这里打电话。你需要调用它。此外,您将输入和每个项目命名为items
. 那大概是另一个问题了。
transform
将您的实现更改为:
transform(items: any, searchText: string): any[] {
if (!items || !searchText || searchText === undefined) {
return items;
}
return items.filter(item =>
item.description.toLowerCase().includes(searchText.toLowerCase()));
}
当然,除非这是您的 OP 中的错字。
这是一个示例 StackBlitz供您参考。