Реализация поиска с использованием пользовательского канала в угловых

Question

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

Вот так выглядит мой фильтр:

import {
  Pipe,
  PipeTransform
} from '@angular/core';

@Pipe({
  name: 'nameFilter'
})

export class NameFilterPipe implements PipeTransform {
  transform(values: any[], key: string, value: string): any[] {
    debugger;

    if (!values) {
      return [];
    }
    if (!value) {
      return values;
    }
    return values.filter(val => val.CampaignName === value);
  }
}

<input [(ngModel)]="searchText" placeholder="search here">

<tr *ngFor="let campaign of campaigns?.result | nameFilter : searchText">

  <td style="max-width:280px">
  
    <p>{{campaign.CampaignName}}</p>
    
    <small><span class="cursor" (click)="filterByOwnr(campaign.DepartmentName)" > {{ campaign.DepartmentName }} &nbsp; &nbsp; </span></small>
    
  </td>

Я отладил свою трубу, и вот как это выглядит:

Я могу получить значение для своего канала, но не могу применить фильтр на своей html-странице.

PS : После попытки @Arcteezy я получаю следующую ошибку.

Журнал консоли для console.log (поле) :

Answer 1

Файл трубы

filteredItems: Array<any>;
// Items & searchText is the input of the pipe;
// @param: Items contains current object in the ngFor loop.
// @param: searchText is the text that is need to be searched string.


transform(items: any[], searchText: string): any[] {

    if (!items) {
        return [];
    }
    if (!searchText) {
        return items;
    }
    searchText = searchText.toLowerCase();
    this.filteredItems =  items.filter( function (records) {
        let searchMatched;
        for ( const keys in records ) {
            if ( typeof (records[keys]) === 'string') {
                searchMatched = records[keys].toLowerCase().includes(searchText);
                if (searchMatched) {
                    return searchMatched;
                }
            }
        }
    });

    if (this.filteredItems.length < Constants.ONE_COUNT) {
        return -1;
    } else {
        return this.filteredItems;
    }
}

Возвращение -1 в последней второй строке означает обработку найденных нулевых результатов.

HTML-файл

*ngFor="data| searchFilter: inputText;

ВышеКод будет выполнять поиск без учета регистра, если вы хотите реализовать поиск с учетом регистра, пожалуйста, удалите преобразование текста поиска в нижний регистр

Answer 2

в вашей трубе .ts

 @Pipe({
  name: 'nameFilter'
})

export class NameFilterPipe implements PipeTransform {
  transform(values: any, key?: string): any[] {
    debugger;
    if (!key) return values;
    key = (key.trim()).toLowerCase();
    return values.filter(val => (val.CampaignName).toLowerCase() === key);
  }
}

и в вашем .html

<tr *ngFor="let campaign of campaigns | nameFilter : searchText">

вот ссылка на рабочий пример stackblitz

Answer 3

Попробуйте,

    import { Pipe, PipeTransform, Injectable } from '@angular/core';

    @Pipe({
        name: 'filter'
    })

    @Injectable()
    export class FilterPipe implements PipeTransform {
        transform(items: any[], field: string, value: string): any[] {

            console.log(value);
            if (!items) {
                return [];
            }
            if (!field || !value) {
                return items;
            }

            return items.filter(singleItem => singleItem[field].toLowerCase().includes(value.toLowerCase()));
        }
    }

В вашем HTML,

    *ngFor = "let... | filter : '<search_field>' : searchText"