首页 文章

使用管道的Angular复选框过滤器

提问于
浏览 次
1

您好我正在尝试创建一个复选框角度管道，可以在选中时过滤我的产品 . 清单是动态的，同一个JSON文件中的列表也是动态的 -

复选框 - 以下代码在组件中创建复选框

<div *ngFor="let b of prod.brand">
  <input type="checkbox" value="{{b.BrandName}}" id="{{b.id}}" name="brandArray" [(ngModel)]="b[BrandSelected]">
  <label for="{{b.id}}">{{b.BrandName}}</label>
</div>

产品列表 - 以下代码用于获取产品列表

<div *ngFor="let prod of productListShow">
<div class="col-md-4" *ngFor="let product of prod.product | selectBrand: brandType">
<div class="sp-list-inner">
<figure>
    <a href="#" target="_blank">
        <img src="{{product.productImage}}" alt="{{product.productImageAlt}}">
        <figcaption>
            <h5 class="product-inner-title">{{product.productName}}</h5>
        </figcaption>
    </a>
</figure>
</div>
</div>
</div>

复选框管道 - 以下代码是我在选择特定复选框时过滤产品时遇到的问题

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

@Pipe({
  name: 'selectBrand'
})
export class SelectBrandPipe implements PipeTransform {

  transform(brand: any, brandType?: any): any {
    console.log('brand', brandType);
    if (!brandType || brandType.length === 0) return brand;
    return brand.filter(brandName => 
    brandType.includes(brandName.companyName));
  }

}

我正在使用这个由服务调用的列表 . 在该服务中，我使用 productList: Products[]; 作为以下列表 -

export const PRODUCTS: Products[] = [
{
    id: 1,
    productCat:'Jeans',
    brand: [
        {
            brandId: 'B1',
            BrandName: 'Brand-1',
            BrandSelected: true
        },
        {
            brandId: 'B2',
            BrandName: 'Brand-2',
            BrandSelected: true
        },
    ],
    product: [
        {
            productId: 2,
            productName: 'Brand 2 prod',
            companyName: 'Brand-1',
        },
        {
            productId: 3,
            productName: 'Brand 2 prod',
            companyName: 'Brand-2',
        },
    ],
},
]

请指教我如何纠正这个问题 . 如果还有其他方法而不是管道，请分享

angular angular-pipe

1 回答

  • 1

    brandType在组件中未定义 . 检查组件文件（以.ts结尾）并查看是否定义了brandType（不应该） .

    测试这个假设是最容易的，只需将一些字符串传递给管道并查看，如果它会说除了undefined之外的其他内容 .

    又名 .

    <div class="col-md-4" *ngFor="let product of prod.product | selectBrand: 'car-brand'">

    如果它然后从管道中的console.log记录“品牌汽车品牌”，那么你肯定会知道初始化你的brandType变量有问题 .

    编辑1：

    最常见的是初始化和修改组件中的变量 . 阿卡 .

    @Component..
export class ComponentA implements OnInit {
    public brandType: string = 'car';

    ngOnInit() { }
}
    回复于

相关问题