因此，我试图在我的角度项目中实现一个自定义管道，该管道用于过滤来自* NgFor的数据，它可以很好地用于文本类型的输入，但是当我执行复选框时，它不会似乎行得通。它只是隐藏了我所有的产品。我相信这是因为检查支票没有传递任何价值吗？我该如何工作？应该改变我的管道工作方式吗？
注意：我只说的是[[ngModel）] =“ cotton”
的第一个复选框。material.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"
}
]
提前谢谢！ ：]
答案 0 :(得分：1)
这是有效的解决方案StackBlitz。
您必须在代码中进行以下更改：
material.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 = '';
}
}