Question

我正在通过API获取数据。我想对数据进行过滤和搜索。我创建了一个管道，它具有以下代码：

文件：text-search.pipe.ts

transform(items: any[], searchText: string): any {
    if (!items) return [];

    if (!searchText) return items;
    console.log("ITEMS ARE",items);
    searchText = searchText.toLowerCase();


    return items.filter(it => {
        return it.hospital_name.toLowerCase().includes(searchText);
    });

  }

我的component.html文件如下：

输入字段//用户可以按名称搜索

 <input type="text" [(ngModel)]="searchText" class="form-control" placeholder="Search">

然后将管道应用于：

 <div class="col-lg-3 col-md-4 col-sm-6" *ngFor="let hospital of hospital_list | hospitalSearch: searchText; let i = index;">

问题： 如果我还有另一个输入字段或其他几个字段，例如“城市字段”，用户也可以在其中搜索“城市”，“专业化”等？

例如：

 <input type="text" [(ngModel)]="searchCity" class="form-control" placeholder="Search">

那么，如何修改现有管道？还是我必须创建一个新管道。

我尝试过的事情：在pipe.ts文件中：

transform(items: any[], searchText: string, searchCity?: string): any {
    if (!items) return [];

    if (!searchText) return items;
    console.log("ITEMS ARE",items);
    searchText = searchText.toLowerCase();

    if (!searchCity) return items;
    console.log("ITEMS ARE",items);
    searchCity= searchCity.toLowerCase();


    return items.filter(it => {
        return it.hospital_name.toLowerCase().includes(searchText);
        return it.hospital_city.toLowerCase().includes(searchCity);

    });

它不起作用，因为第二个return语句不可访问。我尝试阅读该API，但未找到任何支持。请指导我如何向正在获取的数据添加多字段搜索过滤。谢谢。 }

Answer 1

在此处使用布尔运算符。您将需要选择最适合您的特定过滤用例的一个。

过滤与以下至少一项匹配的项目：

return items.filter(it => {
    return it.hospital_name.toLowerCase().includes(searchText)
        || it.hospital_city.toLowerCase().includes(searchCity);
});

过滤所有匹配项：

return items.filter(it => {
    return it.hospital_name.toLowerCase().includes(searchText)
        && it.hospital_city.toLowerCase().includes(searchCity);
});

要使用多个参数调用管道，请使用另一个:。

*ngFor="let hospital of hospital_list | hospitalSearch: searchText:searchCity"

角度-如何从数据（字段）的多个属性中过滤（搜索）数据？

1 个答案: