Angular2：使用文本过滤器管道过滤数组时出错

Question

我希望能够通过对类别名称执行搜索来搜索 categories 数组。我尝试了以下解决方案，但我不确定如何编辑管道中的变量以满足我的需要。

使用以下代码，控制台记录以下错误。

categories.component.html:46:10 caused by: item.indexOf is not a function

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

您在 transform 函数中的 value 参数是一个对象数组（类别）。 javascript 对象在其原型中没有 indexOf 函数，所以这就是您收到此错误的原因。

假设您想要做的是过滤掉这些对象，如果它们的 none 个属性包含 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;
  });
}

Angular2：使用文本过滤器管道过滤数组时出错

Angular2: Error while using a text filter pipe to filter an array

angular2-pipe

angular