Фильтрация не активна при клике по каналу - PullRequest
Новая
       8

Фильтрация не активна при клике по каналу

0 голосов
/ 21 октября 2018

Я хочу получить нужные продукты, выбрав фильтр myfilters .При использовании

store 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>

pipe pipe: 

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

Нужный продукт нужно показывать, когда он имеет тот же «тег», что и тег фильтра.

1 Ответ

0 голосов
/ 22 октября 2018

потому что 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.разделите ngFor в ng-контейнере и вызовите функцию фильтра в вашем теге tr. 

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

добавьте ваш фильтр pipe в качестве функции filter () вашего файла .ts.Это будет более конкретно, чем использование канала.

.TS file 

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