使用Angular 2上另一个组件的搜索项过滤组件中的记录

Question

我有一个名为任务板的组件，我有下表：

<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);
   });
 }
}

我的目标是使用任务搜索输入中的值过滤任务板中的项目。

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

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

Answer 1

如果其中一个组件可以成为另一个组件的子组件，则可以使用@Input()，@Output和EventEmitter绑定/发出搜索输入。像这样的东西：

内部任务板模板：

<task-search (searchValueChanged)="updateFilter($event)"></task-search>

内部任务板代码：

updateFilter(searchText: string): void {
  this.searchText = searchText;
}

内部任务搜索模板：

<input type="text" [(ngModel)]="searchText" (change)="changedSearchText()" />

内部任务搜索代码：

// ... imports ...
import { Output, EventEmitter } from '@angular/core'
// ... inside the class ...
@Output() searchValueChanged: EventEmitter<string> = new EventEmitter<string>();

changedSearchText(): void {
  // emit the change so the parent component can see it
  this.searchValueChanged.emit(this.searchText);
}

有关更多信息，请查看此处的文档：Component Interaction

Answer 2

我没有检查过滤器的代码，但首先需要在任务板和任务搜索之间进行绑定才能传递searchText。试试这个：

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

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

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