Итак, я пытаюсь создать собственный канал для поиска нескольких значений в цикле ngFor. Я искал несколько часов для хорошего рабочего примера, и большинство из них основаны на предыдущих сборках и, похоже, не работают. Итак, я построил Pipe и использовал консоль, чтобы передать мне значения. Однако я не могу отобразить вводимый текст.
Вот предыдущие места, где я искал рабочие примеры:
http://jilles.me/ng-filter-in-angular2-pipes/ < / а>
https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview
https://www.youtube.com/results?search_query=filter+search+angular+2
https://www.youtube.com/watch?v=UgMhQpkjCFg
Вот код, который у меня сейчас есть:
component.html
<input type="text" class="form-control" placeholder="Search" ngModel="query" id="listSearch" #LockFilter>
<div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query">
<input type="checkbox" ngModel="lock.checked" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
<label for="{{lock.ID}}" class="check-label"></label>
<h3 class="card-text name" ngModel="lock.name">{{lock.User}}</h3>
<h3 class="card-text auth" ngModel="lock.auth">{{lock.AuthID}}</h3>
<h3 class="card-text form" ngModel="lock.form">{{lock.FormName}}</h3>
<h3 class="card-text win" ngModel="lock.win">{{lock.WinHandle}}</h3>
</div>
pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'LockFilter'
})
export class LockFilterPipe implements PipeTransform {
transform(locked: any, query: string): any {
console.log(locked); //this shows in the console
console.log(query); //this does not show anything in the console when typing
if(!query) {
return locked;
}
return locked.filter((lock) => {
return lock.User.toLowerCase().match(query.toLowerCase());
});
}
}
Я импортировал трубу в модуль.
Я все еще новичок в Angular 4 и пытаюсь понять, как это работает. В любом случае спасибо за вашу помощь!
Думаю, мне нужно будет более конкретным. Я уже построил поиск с фильтром в JS, который не фильтрует все параметры, что я и пытаюсь сделать. Не просто фильтровать имя пользователя. Я фильтрую все 4 части данных. Я выбрал Pipe, потому что это то, что предлагает вам сделать Angular, как они изначально использовали их в AngularJS. Я просто пытаюсь по сути воссоздать фильтрующий канал, который у нас был в AngularJS, который они удалили для повышения производительности. Все варианты, которые я нашел, не работают или взяты из предыдущих сборок Angular.
Если вам понадобится что-нибудь еще из моего кода, дайте мне знать.
let lock of filteredLocks ()
- person Igor Soloydenko   schedule 17.10.2017