Question

我试图在我的角度4组件中过滤我的数组。该数组有一个属性，它本身也是一个数组：

export const data = [
  {
    "number": "1",
    "lines": [
      "aaaaabbbb bbbbb ccccc ddddd",
      "aaaaabbbb bbbbb ccccc ddddd",
      "aaaaabbbb bbbbb ccccc ddddd",

    ]
  }
  ,
  {
    "number": "2",
    "lines": [
      "aaaaabbbb bbbbb ccccc ddddd",
      "aaaaabbbb bbbbb ccccc ddddd",
      "aaaaabbbb bbbbb ccccc ddddd",

    ]
  }
  ,
  {
    "number": "3",
    "lines": [
      "aaaaabbbb bbbbb ccccc ddddd",
      "aaaaabbbb bbbbb ccccc ddddd",
      "aaaaabbbb bbbbb ccccc ddddd",
    ]
  }
  ]

这是component.html的一部分：

<input (keyup)="search($event.target.value)" />
<tr *ngFor="let item of filteredData">
        <td>{{item.number}}</td>
        <td>{{item.lines}}</td>
</tr>

这是过滤器/搜索ts代码的一部分：

export class AppComponent {
    filteredData = data;

    search(val: any) {
            let ind = false;
            console.log(val);
            if (!val) this.filteredData = this.data;
            //this statement does not work:
            this.filteredData = this.data.filter(item=> item.lines.indexOf(val) >=0)
    }
}

如何过滤数据？忽略角度代码，它更多地是关于过滤器语句。

Answer 1

基于item.lines.indexOf(val)的过滤实际上是在说：

仅向我提供item.lines 中至少有一个对象等于val 的项目。

这与您尝试做的不同，即：

仅向我提供item.lines 中至少有一个对象包含val作为子字符串的项目。

你需要迭代item.lines以获得预期的结果 - 这些行*应该有效：

item => item.lines.includes(line => line.indexOf(val) >= 0)

这样的问题你偶然会在数组上调用一个方法而不是它的内容通常很容易被发现，因为你会收到一个错误 - 由于Array和String和stripos有一个名为indexOf的方法！

_*双关语

Answer 2

像这样的东西

this.filteredData = this.data.filter((item) => {
  return item.lines.filter((inner) => {
    return inner.includes(val);
  }).length > 0;
});

或者

for (const item of this.data) {
  for (const inner of item.lines) {
    if (inner.includes(val)) {
      return item;
    }
  }
}

如何过滤js中的对象数组？

2 个答案: