Question

我认为我错过了一些有关烟斗的事情。所以我的解决方案不起作用
我有一个包含产品数据的JSON文件。产品可以按“ ProductTags”进行排序-带有标签的JSON，可以对其进行过滤。另外，我有JSON，其中包含有关过滤器的详细信息：

"PriceFilter": [
{
    "TagId": 20,
    "Type": "Budget",
    "Value": 5,
    "Values": null,
    "DisplayText": "$5",
    "Order": null
},
{
    "TagId": 21,
    "Type": "Budget",
    "Value": 10,
    "Values": null,
    "DisplayText": "$10",
    "Order": null
}]

产品：

"Products": [
{
    "ProductId": 206419,
    "ProductTitle": "Mom is Fabulous Fruit Box - Good",
    "ProductTags": [ 20, 2, 3, 4 ]
}]

我需要通过以下方式使用标签订购产品：price

商店。 html

<table>
    <tr *ngFor="let P of PriceFilter | filter : term | orderBy: 'Price'">
        <td>{{PriceFilter.DisplayText}}</td>
    </tr>
</table>

商店组件：

stores=[];
products=[];

PriceFilter = [];
GenderFilter =[];
filtered=[];
constructor(private _storeService:StoreService) { }

ngOnInit() {
    this._storeService.getProducts()
       .subscribe(data =>{
           this.products = data.Stores.Products;
           this.stores=data.Stores;
           this.PriceFilter = data.PriceFilter;
           this.GenderFilter = data.GenderFilter;
           console.log(data.PriceFilter)
           console.log(data.GenderFilter)
           console.log(data.Stores)
       });     
}

过滤管：

transform(items: any[], term): any {
    console.log('term', term);

    return term 
        ? items.filter(item => item.ProductTags.indexOf(term) !== -1)
        : items;
}

orderBy管道：

export class OrderbyPipe implements PipeTransform {

transform(items: any[], orderBy: string): any {
    console.log('orderdBy', orderBy);

    return items.sort((a, b) => {return b[orderBy] - a[orderBy]});
}

我该如何解决？

Answer 1

我看到您的过滤器管道是正确的。但是您的orderBy管道正确吗？

在您的订单中通过管道尝试：

items.sort((a, b) => a[orderBy].toLowerCase() !== b[orderBy].toLowerCase() ? a[orderBy].toLowerCase() < b[orderBy].toLowerCase() ? -1 : 1 : 0);

并以html格式传递管道，

<tr *ngFor="let P of PriceFilter | filter : term | orderBy: ['Price']">
    <td>{{PriceFilter.DisplayText}}</td>
</tr>

希望这会有所帮助！

Answer 2

问题：

根据您的管道@RequestMapping(value = {"/projects/{title}**/home"})的定义OrderbyPipe为params，但是您是从html传递string。

array

修复：

<tr *ngFor="let P of PriceFilter | filter : term | orderBy: ['Price']">
    <td>{{PriceFilter.DisplayText}}</td>
</tr>

注意

term是动态的，因此请确保它与任何类型的搜索元素绑定。

Ex：

<tr *ngFor="let P of PriceFilter | filter : term | orderBy: 'Price'">
    <td>{{PriceFilter.DisplayText}}</td>
</tr>

管道以从JSON中过滤数据以获取错误模板解析

2 个答案:

问题：

修复：

注意