angular - 如何将多个参数从动态复选框传递到管道中

Question

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

我试图在管道中做一个 for 循环，并应用一个字符串数组作为参数。

过滤器组件.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>

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

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

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

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

            </ul>
            <ul class="sub-menu collapse filtermenu" data-toggle="collapse" data-target="#storagelabel" id="dashboard">
              <a href="#" data-toggle="collapse" data-target="#storage" class="collapsed active" id="storagelabel">
                <span class="nav-label">Storage</span>
                <span class="fa fa-chevron-left pull-right"></span>
              </a>
              <ul class="nav-label collapse" id="storage" *ngFor="let Product of storage">
                <li class="nav-label text-light">
                  <input type="checkbox" name="options" value="{{Product}}" (change)="setSearchStorage(Product)" /> {{Product}}
                </li>
              </ul>
            </ul>
            <ul class="sub-menu collapse filtermenu" data-toggle="collapse" data-target="#filterlabel" id="dashboard">
              <a (click)="clearFilters()" class="collapsed active" id="filterlabel">
                <span class="nav-label">Clear Filters</span>
              </a>
            </ul>
          </li>
          <li (click)="viewProducts()">
            <a>
              <i class="fa fa-gamepad"></i>
              <span class="nav-label">Products</span>
            </a>
          </li>
          <li>
            <a>
              <i class="fa fa-gamepad"></i>
              <span class="nav-label">FAQ</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="sidenavbtn" [ngStyle]="{'left':open === true ? '37vh' : '0px', 'z-index':19}">
        <button (click)="toggleNav()" class="btn btn-primary btn-sm">
          <mat-icon>more_vert</mat-icon>
        </button>
      </div>
    </div>
  </mat-drawer>
  <mat-drawer-content>
    <!--this is used to fetch the products-->
    <div class="container-fluid main-body ">
      <div class="row">
        <div class="col-md-4 navbar-fixed-top" *ngFor="let product of products | brandFilter : searchBrand:searchBattery:searchCamera:searchColor:
                    searchRam:searchResolution:searchStorage">
          <figure class="card card-product">

            <div class="img-wrap text-center">
              <mdb-carousel class="text-center d-flex justify-content-center" [interval]="'0'">
                <mdb-carousel-item *ngFor="let image of product.images">
                  <div class="img-wrap text-center ">
                    <img class="text-center" src="{{'data:image/jpeg;base64,'+image.image}}" style="width:200px;height:200px;">
                  </div>
                </mdb-carousel-item>
              </mdb-carousel>
            </div>
            <figcaption class="info-wrap" style="padding: 30px">
              <h4 class="title">{{product.productName}}</h4>
              <p class="desc"> {{product.description}}</p>
              <div class="price">
                <div> Price:&#x20b9;{{product.price}}</div>
              </div>
              <p class="text-success">Free shipping</p>
              <p>
                <!-- <button type="button" class="btn btn-outline-success" style="margin-right:10px" (click)="addToCart(product)"><b>Add to Cart </b></button>  -->
                <button type="button" class="btn btn-outline-success" (click)="detailss(product)">
                  <b>View Details & Buy</b>
                </button>
            </figcaption>
          </figure>
        </div>
      </div>
    </div>
  </mat-drawer-content>
</mat-drawer-container>

产品列表组件.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service'
import { Router } from '@angular/router';
import { Product } from '../../partner/Product';



@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  open: boolean;
  marginSize: string;
  sideNavPosition: string;
  collapsedHeight: string;

  brand: Product["brand"];
  battery: Product["battery"];
  camera: Product["camera"];
  color: Product["color"];
  //phoneCondition: Product["phoneCondition"];
  ram: Product["ram"];
  resolution: Product["resolution"];
  storage: Product["storage"];

  searchBrand: string = "";
  searchBattery: string = "";
  searchCamera: string = "";
  searchCondition: string = "";
  searchColor: string = "";
  searchRam: string = "";
  searchResolution: string = "";
  searchStorage: string = "";



  constructor(private productService: ProductService, private router: Router) { }
  products: any[];
  prod: Object[];
  ngOnInit() {

    this.marginSize = '0px';
    this.sideNavPosition = "relative";
    this.open = false;``
    this.getProduct();


    this.productService.brandFilter().subscribe(data => {
      this.brand = data;
    });
    this.productService.batteryFilter().subscribe(data => {
      this.battery = data;
    });
    this.productService.cameraFilter().subscribe(data => {
      this.camera = data;
    });
    this.productService.colorFilter().subscribe(data => {
      this.color = data;
    });
    this.productService.resolutionFilter().subscribe(data => {
      this.resolution = data;
    });
    // this.productService.conditionFilter().subscribe(data => {
    //   this.phoneCondition = data;
    // });
    this.productService.ramFilter().subscribe(data => {
      this.ram = data;
    });
    this.productService.storageFilter().subscribe(data => {
      this.storage = data;
    });

  }
  clearFilters() {
    this.setSearchBrand('');
    this.searchBattery = '';
    this.setSearchCamera('');
    this.setSearchCondition('');
    this.setSearchColor('');
    this.searchRam = '';
    this.setSearchResolution('');
    this.searchStorage = '';
  }
  getProduct() {
    this.productService.getProduct().subscribe(
      product => {
        this.products = product.body;
        console.log(product);
      });

  }
  setSearchBrand(name: string) {

    this.searchBrand = name;
    return this.searchBrand;

  }
  setSearchBattery(name: string) {

    this.searchBattery;
    return this.searchBattery;

  }
  setSearchCamera(name: string) {

    this.searchCamera = name;
    return this.searchCamera;

  }
  setSearchCondition(name: string) {

    this.searchCondition = name;
    return this.searchCondition;

  }
  setSearchColor(name: string) {

    this.searchColor = name;
    return this.searchColor;

  }
  setSearchRam(name: string) {

    this.searchRam = name;
    return this.searchRam;

  }
  setSearchResolution(name: string) {

    this.searchResolution = name;
    return this.searchResolution;

  }
  setSearchStorage(name: string) {

    this.searchStorage = name;
    return this.searchStorage;

  }
  viewProducts() {
    this.router.navigate(["/customers/home"])
  }

  detailss(product: any) {
    this.productService.setProductDetails(product);
    console.log(product)
    this.router.navigate(["/customers/details"]);
  }
  details(products) {
    this.router.navigate(["/customers/home"]);
  }

  addToCart(product) {
    this.productService.addToCart(product)
  }

}

品牌过滤器.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;
    }

  }
}

标签： angulartypescriptfilterpipe