Javascript 使用Angular 2上另一个组件的搜索项筛选组件中的记录

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

<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>

我的目标是使用任务搜索上输入的值从任务板中筛选iTen

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

---

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

我没有检查过滤器的代码，但首先您需要任务板和任务搜索之间的绑定，以便传递搜索文本。所以试试这个：

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

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

//task-board.component.ts
@输入（）搜索文本；
//task-search.component.html

---

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

如果其中一个组件可以成为另一个组件的子组件，您可以使用

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

内部任务搜索模板：

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

内部任务搜索代码：

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

/。。。进口。。。
从“@angular/core”导入{Output，EventEmitter}
// ... 在课堂上。。。
@Output（）searchValueChanged:EventEmitter=新的EventEmitter（）；
changedSearchText（）：void{
//发出更改，以便父组件可以看到它
this.searchValueChanged.emit（this.searchText）；
}

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