Angular 如何将动态复选框中包含多个字符串的一个类别筛选到管道中

我再次问这个问题，因为我以前没有得到一个明确的答案

如果没有管道的话效果会更好，请告诉我怎么做，或者给我指出一个可以学习的来源

我在一个管道中有多个过滤器，以便根据特征过滤掉智能手机。目前，它只适用于每个类别一个复选框，但我希望能够在每个类别中包含多个过滤器（例如，搜索三星和苹果品牌）。此复选框是基于API调用动态生成的，因此我希望管道能够接受数量不定的参数。提前谢谢

我尝试在管道中执行for循环，并将字符串数组作为参数应用

filter-component.html

<mat-drawer-container style="overflow-y: hidden;" class="example-container">
  <mat-drawer mode="side" opened>
    <div class="wrapper" #wrapper>
      <div class="sidebar" [ngStyle]="{'margin-left': marginSize, 'position': sideNavPosition, 'z-index':20, 'height':open===true? collapsedHeight : '100%'}">
        <ul class="list-sidebar bg-defoult">
          <li>
            <a href="#" data-toggle="collapse" data-target=".filtermenu" class="collapsed active">
              <i class="fa fa-th-large"></i>
              <span class="nav-label">Filter</span>
              <span class="fa fa-chevron-left pull-right"></span>
            </a>

            <ul class="sub-menu collapse filtermenu" data-toggle="collapse" data-target="#brandlabel" id="dashboard">
              <a href="#" data-toggle="collapse" data-target="#brand" class="collapsed active" id="brandlabel">
                <span class="nav-label">Brand</span>
                <span class="fa fa-chevron-left pull-right"></span>
              </a>
              <ul class="nav-label collapse" id="brand" *ngFor="let Product of brand; let i = index">
                <li class="nav-label text-light">
                  <input type="checkbox" name="f{{i}}" value="f{{i}}" (change)="setSearchBrand(Product)" /> {{Product}}
                </li>
              </ul>

            </ul>
            <ul class="sub-menu collapse filtermenu" data-toggle="collapse" data-target="#batterylabel" id="dashboard">
              <a href="#" data-toggle="collapse" data-target="#battery" class="collapsed active" id="batterylabel">
                <span class="nav-label">Battery</span>
                <span class="fa fa-chevron-left pull-right"></span>
              </a>
              <ul class="nav-label collapse" id="battery" *ngFor="let Product of battery">
                <li class="nav-label text-light">
                  <input type="checkbox" name="options" value="{{Product}}"  (change)="setSearchBattery(Product)" /> {{Product}}
                </li>
              </ul>

品牌过滤器.pipe.ts

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

@Pipe({
  name: 'brandFilter'
})
export class BrandFilterPipe implements PipeTransform {

  transform(items: any[], searchBrand: string[], searchBattery: string, searchCamera: string, searchColor: string
  ,searchRam: string,searchResolution: string,searchStorage: string ): any[] {
    if (items && items.length){
      return items.filter(item =>{
          if (searchBrand && item.brand.toLowerCase().indexOf(searchBrand) === -1){
              return false;
          }
          if (searchBattery && item.battery.toString().indexOf(searchBattery) === -1){
              return false;
          }
          if (searchCamera && item.camera.toLowerCase().indexOf(searchCamera.toLowerCase()) === -1){
              return false;
          }
          if (searchColor && item.color.toLowerCase().indexOf(searchColor.toLowerCase()) === -1){
            return false;
          }
          // if (searchCondition && item.phoneCondition.toLowerCase().indexOf(searchCondition.toLowerCase()) === -1){
          //   return false;
          // }
          if (searchRam && item.ram.toString().indexOf(searchRam) === -1){
            return false;
          }
          if (searchResolution && item.resolution.indexOf(searchResolution) === -1){
            return false;
          }
          if (searchStorage && item.storage.toString().indexOf(searchStorage) === -1){
            return false;
          }

          return true;
     })
  }
    else{
        return items;
    }

  }
}

---

正如我所说。代码当前允许从每个类别中筛选一个选项。我想对其进行重构或重做，以便每个类别都可以有多个过滤器（例如，搜索品牌，过滤苹果和三星的手机）

您能否为您的服务添加stackblitz使用（…yourdata…）添加示例响应在你的服务类，所以你不必改变很多代码，我不知道如何做这个项目。这是一个更大项目的一小部分。你确定你的过滤管工作正常吗？如果搜索

searchBrand

数组，则筛选条件应为

if（searchBrand&&searchBrand.indexOf（item.brand.toLowerCase（））===-1）

。这也可以根据您的需要处理多个过滤器。它确实有效。它只适用于一个项目though@KevinWilde-

item.brand

是一个字符串，当您对正在调用的字符串调用

indexOf（）

时。你必须调用

searchBrand

array。你能为你的服务添加stackblitz吗？在你的服务类中使用（…yourdata…）添加示例响应，这样你就不必更改很多代码了。我不知道如何在这个项目中做到这一点。这是一个更大项目的一小部分。你确定你的过滤管工作正常吗？如果搜索

searchBrand

数组，则筛选条件应为

if（searchBrand&&searchBrand.indexOf（item.brand.toLowerCase（））===-1）

。这也可以根据您的需要处理多个过滤器。它确实有效。它只适用于一个项目though@KevinWilde-

item.brand

是一个字符串，当您对正在调用的字符串调用

indexOf（）

时。您必须调用

searchBrand

array。

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

@Pipe({
  name: 'brandFilter'
})
export class BrandFilterPipe implements PipeTransform {

  transform(items: any[], searchBrand: string[], searchBattery: string, searchCamera: string, searchColor: string
  ,searchRam: string,searchResolution: string,searchStorage: string ): any[] {
    if (items && items.length){
      return items.filter(item =>{
          if (searchBrand && item.brand.toLowerCase().indexOf(searchBrand) === -1){
              return false;
          }
          if (searchBattery && item.battery.toString().indexOf(searchBattery) === -1){
              return false;
          }
          if (searchCamera && item.camera.toLowerCase().indexOf(searchCamera.toLowerCase()) === -1){
              return false;
          }
          if (searchColor && item.color.toLowerCase().indexOf(searchColor.toLowerCase()) === -1){
            return false;
          }
          // if (searchCondition && item.phoneCondition.toLowerCase().indexOf(searchCondition.toLowerCase()) === -1){
          //   return false;
          // }
          if (searchRam && item.ram.toString().indexOf(searchRam) === -1){
            return false;
          }
          if (searchResolution && item.resolution.indexOf(searchResolution) === -1){
            return false;
          }
          if (searchStorage && item.storage.toString().indexOf(searchStorage) === -1){
            return false;
          }

          return true;
     })
  }
    else{
        return items;
    }

  }
}