javascript - 使用来自 Angular 2 上另一个组件的搜索词过滤组件中的记录

Question

我有一个名为 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 的元素。

目前，即使我写了一些东西，它也不会过滤。

解决这个问题的最佳方法是什么？

Answer 1

我没有检查你的过滤器代码，但首先你需要任务板和任务搜索之间的绑定(bind)才能传递 searchText。所以试试这个:

// task-board.component.ts
@Input() searchText;

// task-search.component.html
<task-board [searchText]="searchText"></task-board>

如果您不想在任务板和任务搜索之间进行直接绑定(bind)，您也可以创建一个服务来执行此操作