javascript – Angular 4过滤搜索自定义管道

所以我正在尝试构建一个自定义管道来对ngFor循环中的多个值进行搜索过滤.我已经花了好几个小时才找到一个好的工作示例,其中大多数是基于以前的版本,似乎没有用.所以我正在构建Pipe并使用控制台为我提供值.但是,我似乎无法显示输入文本.

以下是我以前寻找工作示例的地方:

Angular 4 Pipe Filter

http://jilles.me/ng-filter-in-angular2-pipes/

https://mytechnetknowhows.wordpress.com/2017/02/18/angular-2-pipes-passing-multiple-filters-to-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版本.

如果您需要我的代码中的任何其他内容,请告诉我.

解决方法:

我必须在我的本地实现搜索功能,这里更新了你的代码.请这样做.

这是我必须更新的代码.

目录结构

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

命令运行用于创建管道

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

注意:在此文件中,我必须使用虚拟记录进行实现和测试.

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

我希望你能获得管道功能,这将对你有所帮助.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐