こんにちは私は角度に不慣れで、製品データをフィルタリングするためにアニュラーチェックボックスフィルターパイプを作成しようとしています！ここで、.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)
製品の配列をチェックとして渡し、配列をチェックとしてpipeTransform関数に渡します。次に、product.type（製品モデルの定義によれば存在しない）がcolorsArrayと等しいかどうかを確認します。これはあなたがチェックしたいものではないと思います。
試してみてください：
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()">
コンポーネントtypescriptに、フィルタリングを行う関数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;
}
次に、productListShowの代わりにngForでfilteredProductsを使用します
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加