angular - 我想从列表 angular 6 中搜索数据

Question

这是我为 sortBy 方法所做的 angular 6 输入框搜索代码，但我做错了什么，请检查我的代码

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

我想从这个内容中搜索一个数据这个数据来自 sql connect with spring 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");
    }
    });
  }

标签： angulartypescriptfilterangular6

Answer 1

我认为这里的问题是数据的过滤。尝试将其应用于您的管道过滤器。

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