使用Angular 2

时间:2018-02-27 16:56:49

标签: javascript angular

我有一个名为任务板的组件,其中包含下表:

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

另外,我有一个名为任务搜索的组件,其代码如下:

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

我的目标是使用任务搜索上的输入值从任务板过滤掉itens。

目前,即使我写了一些东西也没有过滤。

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

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:0)

如果其中一个组件可以成为另一个组件的子组件,则可以使用@Input()@OutputEventEmitter绑定/发出搜索中的输入。像这样:

内部任务板模板:

<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