Angular 4 过滤器搜索自定义管道 [英] Angular 4 Filter Search Custom Pipe
问题描述
所以我正在尝试构建一个自定义管道来在 ngFor 循环中执行多个值的搜索过滤器.我已经找了几个小时来寻找一个很好的工作示例，其中大部分都是基于以前的构建并且似乎不起作用.所以我正在构建管道并使用控制台为我提供值.但是，我似乎无法显示输入文本.
以下是我以前寻找工作示例的地方:
http://jiles.me/ng-filter-in-angular2-管道/
https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview
https://www.youtube.com/results?search_query=过滤器+搜索+角度+2
https://www.youtube.com/watch?v=UgMhQpkjCFg
这是我目前拥有的代码:
component.html
<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>pipe.ts
import { Pipe, PipeTransform } from '@angular/core';@管道({名称:'锁过滤器'})导出类 LockFilterPipe 实现 PipeTransform {变换(锁定:任何，查询:字符串):任何{控制台日志(锁定)；//这显示在控制台中控制台日志(查询)；//这在输入时不会在控制台中显示任何内容如果(！查询){返回锁定；}返回locked.filter((lock) => {返回 lock.User.toLowerCase().match(query.toLowerCase());});}}我已将管道导入模块.
我对 Angular 4 还是比较新的，并且正在尝试弄清楚如何使这项工作正常进行.无论如何感谢您的帮助！
我想我需要更具体.我已经在 JS 中构建了一个过滤器搜索，它不会过滤所有选项，这就是我想要做的.不仅仅是过滤用户名.我正在过滤所有 4 条数据.我选择了 Pipe，因为这是 Angular 建议你做的，因为他们最初在 AngularJS 中使用它们.我只是想从根本上重新创建我们在 AngularJS 中的过滤器管道，他们为了性能而删除了它们.我发现的所有选项都不起作用，或者来自之前的 Angular 版本.
如果您需要我的代码中的任何其他内容，请告诉我.
我必须在本地实现搜索功能，这里更新了您的代码.请这样做.
这是我必须更新的代码.
目录结构
app/_管道/搜索/search.pipe.tssearch.pipe.spec.ts应用程序/应用组件.css应用程序组件.htmlapp.component.tsapp.module.tsapp.component.spec.ts运行创建管道的命令
ng g 管道搜索component.html
<div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query"><input type="checkbox" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}"><label [for]="lock.ID" class="check-label"></label><h3 class="card-text name">{{lock.User}}</h3><h3 class="card-text auth">{{lock.AuthID}}</h3><h3 class="card-text form">{{lock.FormName}}</h3><h3 class="card-text win">{{lock.WinHandle}}</h3>component.js
注意:在这个文件中，我必须使用虚拟记录来实现和测试.
import { Component, OnInit } from '@angular/core';从'@angular/forms' 导入 { FormsModule };@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent 实现 OnInit{公开搜索:any = '';锁定:任何[] = [];构造函数(){}ngOnInit(){this.locked = [{ID: 1, 用户: 'Agustin', AuthID: '68114', FormName: 'Fellman', WinHandle: 'Oak Way'},{ID: 2, 用户: 'Alden', AuthID: '98101', FormName: 'Raccoon Run', WinHandle: 'Newsome'},{ID: 3, 用户: 'Ramon', AuthID: '28586', FormName: 'Yorkshire Circle', WinHandle: 'Dennis'},{ID: 4, 用户: 'Elbert', AuthID: '91775', FormName: 'Lee', WinHandle: 'Middleville Road'},]}}module.ts
import { BrowserModule } from '@angular/platform-browser';从'@angular/core' 导入 { NgModule };从'@angular/forms' 导入 { FormsModule };从 './app.component' 导入 { AppComponent };从 './_pipe/search/search.pipe' 导入 { SearchPipe };@NgModule({声明: [应用组件，搜索管道],进口:[浏览器模块，表单模块],提供者:[]，引导程序:[AppComponent]})导出类 AppModule { }pipe.ts
import { Pipe, PipeTransform } from '@angular/core';@管道({名称:'锁过滤器'})导出类 SearchPipe 实现 PipeTransform {变换(值:任何，参数?:任何):任何{if(!value) 返回空值；if(!args) 返回值；args = args.toLowerCase();返回值.过滤器(功能(项目){返回 JSON.stringify(item).toLowerCase().includes(args);});}}我希望您获得管道功能，这会对您有所帮助.
So I am trying to build a custom pipe to do a search filter of multiple values in a ngFor loop. I have looked for a number of hours for a good working example, and most of them are based on previous builds and don't seem to work. So I was building the Pipe and using the console to give me the values. However, I cannot seem to get the input text to show up.
Here are the previous places I have looked to find working examples:
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
Here is the code that I currently have:
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());
});
}
}
I have imported the pipe into the module.
I am still a little newer to Angular 4 and am trying to figure out how to make this work. Anyways thanks for your help!
I guess I will need to be more specific. I already built out a filter search in JS that does not filter all of the options, which is what I am trying to do. Not just filter the User Name. I am filtering all 4 pieces of data. I chose a Pipe as this was what Angular suggests you do as they originally used them in AngularJS. I am just trying to essentially recreate the filter pipe we had in AngularJS that they removed for performance. All options I have found don't work, or are from previous builds of Angular.
If you need anything else from my code let me know.
I have to implement search functionality in my local and Here is Updated your code. please do this way.
Here is the code that I have to update.
directory Structure
app/
_pipe/
search/
search.pipe.ts
search.pipe.spec.ts
app/
app.component.css
app.component.html
app.component.ts
app.module.ts
app.component.spec.ts
command run for creating pipe
ng g pipe search
component.html
<input type="text" class="form-control" placeholder="Search" [(ngModel)]="query" id="listSearch">
<div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query">
<input type="checkbox" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
<label [for]="lock.ID" class="check-label"></label>
<h3 class="card-text name">{{lock.User}}</h3>
<h3 class="card-text auth">{{lock.AuthID}}</h3>
<h3 class="card-text form">{{lock.FormName}}</h3>
<h3 class="card-text win">{{lock.WinHandle}}</h3>
</div>
component.js
Note: In this file, i have to use dummy records for implementation and testing purpose.
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
public search:any = '';
locked: any[] = [];
constructor(){}
ngOnInit(){
this.locked = [
{ID: 1, User: 'Agustin', AuthID: '68114', FormName: 'Fellman', WinHandle: 'Oak Way'},
{ID: 2, User: 'Alden', AuthID: '98101', FormName: 'Raccoon Run', WinHandle: 'Newsome'},
{ID: 3, User: 'Ramon', AuthID: '28586', FormName: 'Yorkshire Circle', WinHandle: 'Dennis'},
{ID: 4, User: 'Elbert', AuthID: '91775', FormName: 'Lee', WinHandle: 'Middleville Road'},
]
}
}
module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SearchPipe } from './_pipe/search/search.pipe';
@NgModule({
declarations: [
AppComponent,
SearchPipe
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'LockFilter'
})
export class SearchPipe implements PipeTransform {
transform(value: any, args?: any): any {
if(!value)return null;
if(!args)return value;
args = args.toLowerCase();
return value.filter(function(item){
return JSON.stringify(item).toLowerCase().includes(args);
});
}
}
I hope you are getting the pipe functionality and this will help you.
这篇关于Angular 4 过滤器搜索自定义管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
