使用管道单击时过滤无效

Question

我想通过选择过滤器myfilters 来获得合适的产品。这不会发生在使用

存储html：

<h2>store</h2>
<select>
  <option *ngFor="let g of GenderFilter">{{g.DisplayText}}</option>
</select>
<select>
  <option *ngFor="let p of PriceFilter">{{p.DisplayText}}</option>
</select>

<tr *ngFor="let P of products | filer : p | orderBy: 'PriceFilter'">
  <td>{{p.DisplayText}}</td>
</tr>

过滤管道：

export class FilerPipe implements PipeTransform {
  transform(items: any[], term): any {
    console.log('term', term);

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

按管道排序：

transform(items: Array<string>, orderBy: string): Array<string> {
  if (items !== undefined) {
    items.sort((a: any, b: any) => {
      if (a[orderBy] < b[orderBy]){
        return -1;
      } else if (a[orderBy] > b[orderBy]) {
        return 1;
      } else {
        return 0;   
      }
    });
  }
  return items;
}

当它具有与过滤器标签相同的“标签”时，需要显示正确的产品。

Answer 1

因为p不存在于

<select>
 <option *ngFor="let p of PriceFilter">{{p.DisplayText}}</option>
</select>

在你的下一个 ngfor 过滤器中捕获它。您必须找到一种替代方法来获取用户选择的值 p 并将其传递给您的过滤器管道。

已按照您在评论中提供的内容进行了编辑

<h2>store</h2>
 <select [(ngModel)]="selectedOption" name=Gender>
  <option *ngFor="let g of GenderFilter">{{g.DisplayText}}</option> 
 </select>
 <select [(ngModel)]="selectedOptionPrice" name=Price>
  <option *ngFor="let p of PriceFilter">{{p.DisplayText}}</option> 
 </select>

您实际上可以将过滤器与 ngfor 分开。在 ng-container 中分离 ngFor 并在 tr 标签中调用过滤器函数。

<ng-container *ngFor="let P of products | orderBy: 'PriceFilter'">
 <tr *ngIf=filter(selectedOptionPrice)>
  <td>{{selectedOptionPrice.DisplayText}}</td>
 </tr>
</ng-container>

将您的过滤器管道添加为您的 .ts 文件的 filter() 函数。这将比使用管道更具体。

.TS 文件

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