带有复选框的自定义管道没有给出正确的值

Question

所以我试图在我的角度项目中实现一个自定义管道，用于过滤来自 *NgFor 的数据，它适用于文本类型的输入，但当我做一个复选框时它不会t 似乎工作。它只是隐藏了我所有的产品。我相信它是因为支票没有传递任何价值？我怎样才能使这项工作？应该改变我的管道的工作方式吗？

注意：我说的是第一个复选框，即 [(ngModel)] = "cotton"

ma​​terial.pipe.ts

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

@Pipe({
  name: 'material',
  pure: false
})
export class MaterialPipe implements PipeTransform {

  transform(values: any, args?: any): any {
   return args ? values.filter(product => product.material === args) : values;
  }

}

product-list.component.html

<div class="category-container">
  <div class="wrapper">
    <h2>Material</h2>
    <div class="form-check">
      <input type="checkbox" [(ngModel)]="cotton" value="Cotton" name="Cotton">
      <label for="defaultCheck1" class="form-check-label">
        Cotton
      </label>
      <input type="checkbox" [(ngModel)]="silk" (change)="loadProductsSecond()">
      <label for="defaultCheck1" class="form-check-label">
        Silk
      </label>
    </div>
  </div>
</div>

<div class="container">
  <div class="row align-items-start">
    <div *ngFor="let product of products | material: cotton"  class="col-6">
      <app-product-card [product]="product" ></app-product-card>
    </div>
  </div>
</div>

product-list.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ProductService } from 'src/app/_services/product.service';
import { Product } from 'src/app/_models/product';


@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  @Input() product: Product;
  products: Product[];
  cotton: any;
  silk: any;
  filter1 = 'Cotton';
  filter2 = 'Silk';
  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.loadProducts();
  }

  loadProducts() {
    this.productService.getProducts().subscribe((products: Product[]) => {
      this.products = products;
    }, error => {
      console.log(error);
    });
  }
}

产品数据 请注意，我使用了可能不是英文的随机值。 但是英语和非英语都适用于文本类型的输入，但不适用于复选框类型的输入。

[
{
    "id": 1,
    "name": "Цвете",
    "category": "Празничен",
    "material": "Памук и Вълна",
    "size": "25cm",
    "price": 10.5,
    "description": "Тест Тест",
    "referenceNumber": "123123SY"
},
{
    "id": 2,
    "name": "тест",
    "category": "тес",
    "material": "тес",
    "size": "тест",
    "price": 11,
    "description": "тесте",
    "referenceNumber": "454545TY"
},
{
    "id": 3,
    "name": "Test",
    "category": "Test",
    "material": "Test",
    "size": "Test",
    "price": 23.35,
    "description": "fgdfgwertwer",
    "referenceNumber": "64562XY"
},
{
    "id": 4,
    "name": "Secret Toymaker2",
    "category": "сдфгсдфг",
    "material": "Cotton",
    "size": "25cm",
    "price": 10.5,
    "description": "asdqwe",
    "referenceNumber": "1231ss23SY"
},
{
    "id": 5,
    "name": "Кошничка",
    "category": "Поднос",
    "material": "Прежда",
    "size": "20см",
    "price": 5.5,
    "description": "Хубава кошничка за държане на предмети.",
    "referenceNumber": "56712RV"
},
{
    "id": 6,
    "name": null,
    "category": null,
    "material": null,
    "size": null,
    "price": 0,
    "description": null,
    "referenceNumber": null
},
{
    "id": 7,
    "name": "asdasd",
    "category": "gsadfsdf",
    "material": "Прежда",
    "size": "123cm",
    "price": 12,
    "description": "dfgsdfgretert",
    "referenceNumber": "12312515XY"
}

]

提前致谢！ :]

Answer 1

这是有效的解决方案StackBlitz。

您必须在代码中进行以下更改：

ma​​terial.pipe.ts

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

@Pipe({
  name: 'material',
  pure: false
})
export class MaterialPipe implements PipeTransform {

  transform(array: any, query: string[]): any[] {
    if (typeof array === 'object') {
      var resultArray = [];
      if (query.length === 0) {
        resultArray = array;
      }
      else {
        resultArray = (array.filter(function (a) {
          return ~this.indexOf(a.material);
        }, query));
      }
      return resultArray;
    }
    else {
      return null;
    }
  }

}

product-list.component.html

<div class="category-container">
  <div class="wrapper">
    <h2>Material</h2>
    <div class="form-check">
      <input type="checkbox" (change)="onCheck($event, 'Cotton')"   value="Cotton" name="Cotton">
      <label for="defaultCheck1" class="form-check-label">
        Cotton
      </label>
      <input (change)="onCheck($event,'silk')"  type="checkbox"   value="silk">
      <label for="defaultCheck1" class="form-check-label">
        Silk
      </label>
    </div>
  </div>
</div>

<div class="container">
  <div class="row align-items-start">
    <div *ngFor="let product of products | material: filterKeys"  class="col-6">
      {{ product?.name }} |   {{ product?.material }}
    </div>
  </div>
</div>

product-list.component.ts

products= [
      {
          "id": 1,
          "name": "Цвете",
          "category": "Празничен",
          "material": "Памук и Вълна",
          "size": "25cm",
          "price": 10.5,
          "description": "Тест Тест",
          "referenceNumber": "123123SY"
      },
      {
          "id": 2,
          "name": "тест",
          "category": "тес",
          "material": "silk",
          "size": "тест",
          "price": 11,
          "description": "тесте",
          "referenceNumber": "454545TY"
      },
      {
          "id": 3,
          "name": "Test",
          "category": "Test",
          "material": "Test",
          "size": "Test",
          "price": 23.35,
          "description": "fgdfgwertwer",
          "referenceNumber": "64562XY"
      },
      {
          "id": 4,
          "name": "Secret Toymaker2",
          "category": "сдфгсдфг",
          "material": "Cotton",
          "size": "25cm",
          "price": 10.5,
          "description": "asdqwe",
          "referenceNumber": "1231ss23SY"
      },
      {
          "id": 5,
          "name": "Кошничка",
          "category": "Поднос",
          "material": "Прежда",
          "size": "20см",
          "price": 5.5,
          "description": "Хубава кошничка за държане на предмети.",
          "referenceNumber": "56712RV"
      },
      {
          "id": 6,
          "name": null,
          "category": null,
          "material": null,
          "size": null,
          "price": 0,
          "description": null,
          "referenceNumber": null
      },
      {
          "id": 7,
          "name": "asdasd",
          "category": "gsadfsdf",
          "material": "Прежда",
          "size": "123cm",
          "price": 12,
          "description": "dfgsdfgretert",
          "referenceNumber": "12312515XY"
      }
    ];

  filterKeyWord: string = '';
  filterKeys = [];
  constructor() { }

  ngOnInit() {

  }

  onCheck(event, $value) {
    if (event.target.checked) {
      this.filterKeys.push($value);
    }
    else {
      this.filterKeys.splice(this.filterKeys.indexOf($value), 1);
    }

    if (this.filterKeys.length > 0) {
      this.filterKeyWord = this.filterKeys.join();
      console.log(this.filterKeyWord);
    }
    else {
      this.filterKeyWord = '';
    }

  }