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容器中分离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;
}

使用管道单击时过滤未激活

1 个答案: