管道从 JSON 过滤数据得到错误模板解析

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;
}

按管道订购：

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

问题：

根据您的管道 OrderbyPipe 定义 params 是 string 但是您从 html 传递 array。

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

修复：

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

注意

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

例如：

<input type="text" #term="ngModel" [(ngModel)]="searchText" />