我有一个名为 task-board 的组件,其中有下表:
<tr *ngFor="let task of tasks | taskFilter: searchText" >
<td>{{ task.taskName }}</td>
<td>{{ task.location }}</td>
<td>{{ task.description }}</td>
<td>{{ task.timeElapsed }}</td>
<td>{{ task.completed }}</td>
</tr>
此外,我还有一个名为 task-search 的组件,它具有以下代码:
<label>Search:</label>
<input type="text" [(ngModel)]="searchText" />
<p>You are looking for: {{ searchText }}</p>
还有一个名为 taskFilter 的管道,代码如下:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'taskFilter'
})
export class TaskFilterPipe 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);
});
}
}
我的目标是使用 task-search 中的输入值过滤来自 task-board 的元素。
目前,即使我写了一些东西,它也不会过滤。
解决这个问题的最佳方法是什么?
最佳答案
我没有检查你的过滤器代码,但首先你需要任务板和任务搜索之间的绑定(bind)才能传递 searchText。所以试试这个:
// task-board.component.ts
@Input() searchText;
// task-search.component.html
<task-board [searchText]="searchText"></task-board>
如果您不想在任务板和任务搜索之间进行直接绑定(bind),您也可以创建一个服务来执行此操作
关于javascript - 使用来自 Angular 2 上另一个组件的搜索词过滤组件中的记录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49013990/