Question

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

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

由 categories.component.html：46：10不是函数

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

Angular2：使用文本筛选器管道筛选数组时出错

1 个答案: