首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular复选框过滤不工作的产品

Angular复选框过滤不工作的产品
EN

Stack Overflow用户
提问于 2018-06-10 01:58:05
回答 1查看 48关注 0票数 0

你好,我正在尝试创建一个angular上的电子商务页面,其中的产品显示与复选框选项,以过滤产品。但是,我无法使复选框筛选器工作。请帮帮忙。

这是我的代码-

代码语言:javascript
复制
<div class="brand-select">
<div class="brand-name">Select Color</div>
<form>
    <div class="form-check brand-checkbox" *ngFor="let col of colors;let index = index">
        <input class="form-check-input" 
             type="checkbox" 
             value="{{col.id}}" 
             id="{{col.id}}" 
             name="checkbox" 
             [(ngModel)]="col.selected"
             (ngModelChange)="filterProducts()">

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

<div *ngFor="let prod of productListShow">
    <div *ngFor="let product of prod.product">
        <h5 class="product-inner-title">{{product.productName}}</h5>
    </div>
</div>

在我的组件.ts文件中-

代码语言:javascript
复制
public colors: any[] = [
{
  id: 1,
  productColor: "Black",
  selected: false,
},
{
  id: 2,
  productColor: "Green",
  selected: false,
}
]
constructor(private productservice: ProductService) { }

ngOnInit() {
 this.productList = this.productservice.getProducts();
 this.productListShow = this.productList; 
}

  public filterProducts(): void {
  const filteredProductArray = new Array<any>();
  const activeColors = this.colors.filter(c => c.selected).map(c => c.productColor);
  this.productList.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.productListShow = filteredProductArray;
  console.log(this.productListShow);
}

我正在从服务ProductService获取我的产品的数据。这是产品的数据-

代码语言:javascript
复制
import { Products } from './products';
export const PRODUCTS: Products[] = [
    {
        id: 1,
        productCat:'Jeans',
        product: [
            {
                productId: '1',
                productName: 'Trendy Black',
                productColor: 'Black',
            },
            {
                productId: '2',
                productName: 'Trendy Green',
                productColor: 'Green',
            },
        ],
    },
]

请帮帮忙。在我的控制台日志中,它给了我一个空数组。

更新-

在我的逻辑中,我已经将错误更正为map(c => c.productColor)

现在,当我选中复选框时,它会过滤每个productCat的所有结果,因为我正在根据productCat加载产品,例如productCat = Jeans,只有牛仔裤产品才会显示。

这是我的档案-

代码语言:javascript
复制
import { Products } from './products';
export const PRODUCTS: Products[] = [
    {
        id: 1,
        productCat:'Jeans',
        product: [
            {
                productId: '1',
                productName: 'Trendy Jeans',
                productColor: 'Green',
            },
            {
                productId: '2',
                productName: 'Black tapered Jeans',
                productColor: 'Black',
            },
        ],
    },
    {
        id: 2,
        productCat:'Shirts',
        product: [
            {
                productId: '1',
                productName: 'Trendy Shirts',
                productColor: 'Green',
            },
            {
                productId: '2',
                productName: 'Black Shirts',
                productColor: 'Black',
            },
        ],
    },
]

因此,当我检查绿色时,它会过滤所有绿色数据,即显示来自productCat牛仔裤和衬衫的绿色产品。如果我只展示牛仔裤数据,我只想展示牛仔裤的绿色产品。请帮帮忙。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-10 02:21:51

我在colors数组的对象中看不到color,它应该是map中的c.productColor,如下所示:

代码语言:javascript
复制
public filterProducts(): void {
      ...
      const activeColors = this.colors.filter(c => c.selected).map(c => c.productColor);
      ...
}

更新1:

代码语言:javascript
复制
productCategory: string;

ngOnInit() {
    this.activatedRoute.params .subscribe(params => { 
        if (params.type) {
            this.productCategory = params.type;
        }
        ...
    });
}

public filterProducts(): void {
    let filteredProductArray;
    const activeColors = this.colors.filter(c => c.selected).map(c => c.productColor);
    let productData = this.productList.find(product => product.productCat == this.productCategory);
    this.productListShow = [];
    if(productData) {
        let filteredProductData = JSON.parse(JSON.stringify(productData))
        let products = productData.product;
        filteredProductData.product = products.filter(product => activeColors.includes(product.productColor));
        this.productListShow.push(filteredProductData);
    }
};
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50777089

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档