Я хочу найти данные из списка angular 6

Question

Это мой код angular 6. Поле ввода для поиска Я сделал для метода sortBy, но это работает, что я делаю неправильно, пожалуйста, проверьте мой код

<input type="text" [(ngModel)]="searchText" placeholder="search by text" style="color: black;">

Я хочу найти данные из этого Содержимое Эти данные получены из соединения sql с пружиной Api

<div *ngFor="let vendor of availableVendors  | vendorFilter:'searchText' ; let i = index ">
                            <div class="row">
                                <div class="col-md-1">
                                    <div class="tablevalue" style="text-align:center">
                                        {{ i + 1}}
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="tablevalue" style="text-align:center">
                                        {{vendor.name | uppercase}}
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="tablevalue" style="text-align:center;">
                                        {{vendor.isPaidVerifiedUser == true?'Yes':'No' }}
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="tablevalue">
                                        {{vendor.city}}
                                    </div>
                                </div>

Это был мой код .pipe. Мы также создаем канал для этого

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

@Pipe({
  name: 'vendorFilter'
})
export class VendorFilterPipe implements PipeTransform {
  transform(value: any,field: any, searchText: any): any {

    if(!value)return null;
    if(!searchText)return value;

    searchText = searchText.toLowerCase();

    return value.filter(function(item){
        return item.filter(item).toLowerCase().includes(searchText);
    });
}
  }

.ts кода

viewAvailableVendors() {  
    let token = this.session.get('token');
    this.dataservice.get("requests/viewAvailableVendors/" + this.requestid, token).subscribe(data => {
      this.availableVendors = data;
      if(this.availableVendors !=false){
      this.requestAvailableVendorsDisplay = "block";
    }
    else{
      this.requestAvailableVendorsDisplay = "block";
      this.openModal("Keep in Touch!", "We'll come back soon we will working on it! please be patience");
    }
    });
  }

Answer 1

Вы можете использовать простое событие ngModelChange, не мешая трубе. Вот пример

HTML:

<input type="text" [(ngModel)]="searchText" (ngModelChange)="filter($event)" placeholder="search by text" style="color: black;">
<div *ngFor="let item of filteredItems">
  {{item}}
</div>

Компонент. тс

  public searchText: string;
  public items: any[] = ["Rabbit", "Rage","Raw","Cow"];
  public filteredItems: any[] = [];

  public filter(event): void{
    this.filteredItems = this.items.filter(x => x.toLowerCase().includes(event.toLowerCase()));
  }

Answer 2

Я думаю, что проблема здесь заключается в фильтрации данных. Попробуйте применить это к вашему трубному фильтру.

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

@Pipe({
  name: 'vendorFilter'
 })
export class VendorFilterPipe implements PipeTransform {
  transform(value: any,field: any, searchText: any): any {

    if(!value)return null;
    if(!searchText)return value;

    searchText = searchText.toLowerCase();

    return value.filter(item => {
        item.name.toLowerCase().includes(searchText) ||
        item.city.toLowerCase().includes(searchText)
    });
  }
}