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

【问题标题】：I want to Search a data from the list angular 6我想从列表 angular 6 中搜索数据
【发布时间】：2020-06-11 00:58:30
【问题描述】：

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

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

我想从此内容中搜索数据此数据来自与 spring Api 的 sql 连接

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

【问题讨论】：

标签： angular typescript filter angular6

【解决方案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)
    });
  }
}

【讨论】：

我只是在这里添加了过滤器示例的名称和城市。只需添加您希望可用于搜索返回过滤器值的其他属性。

【解决方案2】：

您可以使用简单的 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>

Component.ts

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

【讨论】：

这个放在哪里