Я хочу отфильтровать мои столбцы таблицы на основе введенного пользователем текста. Я использую следующую трубу,Наблюдаемый фильтр angularjs 2
import {Pipe, PipeTransform} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/filter';
@Pipe({
name: "search"
})
export class SearchPipe implements PipeTransform {
searchTerms: Map<string, string> = new Map<string, string>();
key: string;
term: string = "*";
transform(input, [colIndex, term, key]) {
console.log("start of search " + term + " key:" + key);
this.key = key;
this.term = term;
if (this.term == '*') {
return input;
} else {
input.filter(
function(data) {
data.forEach(
e=> {
console.log("filtering data " + e[key]+" result is : "+e[key].contains(term));
return e[key].contains(term);
}
)
}
).subscribe(
function(err) {
console.log('Error: %s', err);
},
function() {
console.log('Completed');
}
)
}
}
}
В моей HTML-странице,
<tr *ngFor="#column of (tableData.columns | search:columnIndex:filterTerm:columnKey | async)" (click)="onRowSelect(column)">
<td *ngFor="#key of column | jsonIterator">{{column[key]}}</td>
</tr>
tableData.columns имеет типа, который я наблюдаемый я получаю из файла JSON, который, имеющее содержание, как,
[{"Component ID":"1","Component Type":"abc","Label Value":"user ID","Tool Tip Value":"please enter user ID"},
{"Component ID":"2","Component Type":"oit","Label Value":"user name","Tool Tip Value":"please enter user name"}
]
«Термин» - это введенный текст, который будет искать по значению «ключ» в json. JsonIterator - это моя другая труба, откуда я получаю свои ключи в своем json
Когда пользователь вводит текст, моя таблица данных очищается. Что мне не хватает?
а также мой подход правильный? Поскольку я новичок в работе с угловыми js 2, я не знаю об этих соглашениях, применяемых при реализации таких компонентов. Я имею в виду, это правильный способ пользовательского фильтра наблюдать или использовать карту или что-то еще?
данные столбец заполняется, как,
this.tableBean.columns = this.http.get('appLiteral.json')
.map(res => res.json());
является 'tableData. столбцы асинхронные (наблюдаемые)? Предоставьте дополнительную информацию о том, откуда поступают данные. –
вы не возвращаете отфильтрованные столбцы в случае, если он равен! = '*' –