Angular2: ошибка при использовании конвейера текстового фильтра для фильтрации массива

Question

Я хочу иметь возможность искать хотя categories массив путем выполнения поиска по названию категории. Я попробовал следующее решение, но я не уверен, как редактировать переменные в трубе, чтобы соответствовать моим потребностям.

С помощью следующего кода консоль регистрирует следующую ошибку.

Categories.component.html:46:10 вызвано: item.indexOf не является функцией

Template

<tr *ngFor="let category of categories | textFilter:filterText">
    <td>{{category.name}}</td>
    <td>{{category.slug}}</td>
</tr>

Pipe

@Pipe({ name: 'textFilter' })

export class TextFilterPipe
{
  transform(value: any, term: any) {
    if (!term) return value;
    return value.filter((item: any) => item.indexOf(term) > -1);
  }
}

Answer 1

Ваш value параметр в transform функция, это массив объектов (категория). Объект JavaScript не имеет indexOf функция в своем прототипе, поэтому вы получаете эту ошибку.

Предполагая, что вы хотите сделать, это отфильтровать эти объекты, если ни одно из их свойств не содержит termтогда вы должны сделать это так:

transform(value: any, term: any) {
  if (!term) return value;
  return value.filter((item: any) => {
    for (let prop in item) {
      if (typeof item[prop] === "string" && item[prop].indexOf(term) > -1) {
        return true;
      }
    }
    return false;
  });
}