我已经创建了一个筛选器,并以Angular 排序管道,并按如下方式链接它.但是管子链条不起作用.如果我只使用一个管道,它可以工作,但如果我像下面这样使用两个管道,只有过滤器功能可以工作,排序管道不能工作.谁能告诉我我到底犯了什么错?
<div class="grid-container">
<div class="grid-item" *ngFor="let prod of (productsList.products | sort:sortProductSelected | filterOnPrice:priceRange )">
<div class="card" style="width: 18rem;border: 0px;">
<img src="{{prod.thumbnail}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{prod.brand}}</h5>
<p class="card-text">${{prod.price}}</p>
<p class="card-text">{{prod.description}}</p>
<a target="_blank" class="btn btn-primary" (click)="viewProduct(prod.id)">View Product</a>
</div>
</div>
</div>
</div>
</div>
分拣管道
export class SortPipe implements PipeTransform {
transform(value: any[], ...args: any): any[] {
if(args){
switch(args[0]){
case 'Price low to hight':
value.sort((a,b)=>{
if(a.price<b.price) return -1;
else if(a.price>b.price) return 1;
return 0;
console.log("value");
})
break;
case 'Price High to Low' :
value.sort((a,b)=>{
if(a.price>b.price) return -1;
else if(a.price<b.price) return 1;
return 0;
})
break;
case 'Ratings':
value.sort((a,b)=>{
if(a.rating<b.rating) return -1;
else if(a.rating>b.rating) return 1;
return 0;
})
break;
case 'Discounts' :
value.sort((a,b)=>{
if(a.discountPercentage<b.discountPercentage) return -1;
else if(a.discountPercentage>b.discountPercentage) return 1;
return 0;
})
break;
default: return value;
}
}
return value;
}
}
滤管
export class FilterOnPricePipe implements PipeTransform {
transform(value: any[], ...args: any): any[] {
let FliteredArray:any[] =[];
FliteredArray = value.filter((a)=>{
console.log(a.price);
console.log(FliteredArray);
return a.price<=args[0];
})
console.log(FliteredArray);
return FliteredArray;
}
}