Рубрики
Без рубрики

Угловой 4/6 фильтр поиск пользовательских труб

Короткий фрагмент пользовательской трубы для поиска функциональности в угловых 4/6.

Автор оригинала: chintan kotadiya.

Итак, один из моих коллеги боролся с угловым поиском с использованием пользовательских труб. Поэтому я помог, а здесь ниже код, который я реализовал для моего друга. Давай следуй вместе со мной.

Структура каталогов

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

Это будет генерировать поисковую трубу.

app.component.html.


    

    
    
    
{{lock.User}}

    
{{lock.AuthID}}

    
{{lock.FormName}}

    
{{lock.WinHandle}}

Мой файл app.component выглядит так. Обратите внимание на наши LockedFilter Отказ Какая наша поисковая труба.

app.component.ts.

Примечание. В этом файле я должен использовать фиктивные записи для реализации и тестирования

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'},
        ]
    }
}

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

Надеюсь это поможет!

Читайте ещё по теме: