Angular 复选框的 4 个管道无法正常工作

Question

您好，我是 angular 的新手，我正在尝试创建一个复选框过滤器管道来过滤我的产品数据！在这里，我在 .ts 文件中为复选框创建了颜色（我还没有包括与此问题无关的代码）

public colors: any[] = [
{
  id: 1,
  color: "Black",
  selected: true,
},
{
  id: 2,
  color: "Green",
  selected: true,
}
]

我正在为复选框使用管道 -

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'selectBrand'
})
export class SelectBrandPipe implements PipeTransform {
    transform(check: any, checked?: any): any {
        console.log('checked', checked);
        return checked ? check.filter(sal => sal.type === checked) : check;
    }
}

在我的 HTML 文件中 -

<form>
    <div class="form-check brand-checkbox" *ngFor="let col of colors">
      <input class="form-check-input" 
             type="checkbox" 
             value="{{col.id}}" 
             id="{{col.id}}" 
             name="" 
             [(ngModel)]="col.selected">

      <label class="form-check-label" for="{{col.id}}">
        {{col.productColor}}
      </label>
    </div>
</form>

<div class="shop" *ngFor="let prod of productListShow">
    <div class="col-md-4" *ngFor="let product of prod.product | selectBrand: colors">
            <h5>{{product.productName}}</h5>
    </div>
</div>

我正在从服务获取我的产品数据 -

{
    id: 1,
    productName:'Products',
    product: [
        {
            productId: 1,
            productName: 'Shirt 1',
            productColor: 'Green',
        },
        {
            productId: 2,
            productName: 'Shirt 2',
            productColor: 'Black',
        },
    ],
},

当代码运行时，所有复选框都被选中，但我在控制台日志中看不到任何产品。我得到 -

checked 
(2) [{…}, {…}]
0
:
{id: 1, productColor: "Black", selected: true}
1
:
{id: 2, productColor: "Green", selected: true}
length
:
2
__proto__
:
Array(0)

Answer 1

您正在将产品数组作为 check 和颜色数组作为 checked 传递到您的 pipeTransform 函数中。然后检查 product.type（顺便说一句，根据您的产品模型定义，它不存在）是否等于颜色数组。我想这不是你想检查的。

试试：

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

@Pipe({
    name: 'selectBrand',
    pure: false
})
export class SelectBrandPipe implements PipeTransform {
transform(products: any[], colors: any[]): any {

    const activeColors = colors.filter(c => c.selected).map(c => c.color)
    console.log('checked colors', activeColors.join(","));
    return products.filter(p => activeColors.includes(p.productColor));
    }
}

顺便说一句：如果你真的想使用管道进行过滤，你需要一个不纯的管道，由于性能原因不推荐。

我建议仅当用户通过将 (ngModelChange) 添加到复选框输入元素来更改复选框状态时才过滤产品，例如：

<input class="form-check-input" 
             type="checkbox" 
             value="{{col.id}}" 
             id="{{col.id}}" 
             name="" 
             [(ngModel)]="col.selected"
             (ngModelChange)="filterProducts()">

在您的组件打字稿中添加一个函数 filterProducts 来执行过滤：

  public filterProducts(): void {
    const filteredProductArray = new Array<any>();
    const activeColors = this.colors.filter(c => c.selected).map(c => c.color);
    this.productListShow.forEach(prod => {
        const filteredSubProducts = prod.product.filter(p => activeColors.includes(p.productColor));
         if(filteredSubProducts.length > 0){
             const clonedProduct = Object.assign({}, prod);
             clonedProduct.product = filteredSubProducts;
             filteredProductArray.push(clonedProduct);
         }
    });
    this.filteredProducts = filteredProductArray;
}

然后在 ngFor 中使用 filteredProducts 而不是 productListShow

Answer 2

复选框的 NgModel：

<input id="colId{{i}}"  [checked]="col.active" class="" (change)=" col.active = !col.active" type="checkbox">
<label for="colId{{i}}" ></label>

Angular 复选框的 4 个管道无法正常工作

Angular 4 pipe for checkbox not working properly

angular-pipe

angular