Angular复选框过滤不工作的产品
Angular复选框过滤不工作的产品
提问于 2018-06-10 01:58:05
你好，我正在尝试创建一个angular上的电子商务页面，其中的产品显示与复选框选项，以过滤产品。但是，我无法使复选框筛选器工作。请帮帮忙。
这是我的代码-
<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文件中-
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获取我的产品的数据。这是产品的数据-
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，只有牛仔裤产品才会显示。
这是我的档案-
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牛仔裤和衬衫的绿色产品。如果我只展示牛仔裤数据，我只想展示牛仔裤的绿色产品。请帮帮忙。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 02:21:51
我在colors数组的对象中看不到color，它应该是map中的c.productColor，如下所示：
public filterProducts(): void {
...
const activeColors = this.colors.filter(c => c.selected).map(c => c.productColor);
...
}更新1：
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);
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50777089
复制相关文章
相似问题
腾讯云开发者
