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