Question

我试图在不使用任何管道的情况下在表内构建搜索。这就是我现在拥有的：

.ts

  get filteredArray() {
    if (this.searchValue.length === 0) {
      return this.usersList
    }

    return this.usersList.filter((user) => {
      return (this.searchValue.length > 0 ? this.searchValue.indexOf(user.name) !== -1 : true) || 
      (this.searchValue.length > 0 ? this.searchValue.indexOf(user.group) !== -1 : true) || 
      (this.searchValue.length > 0 ? this.searchValue.indexOf(user.age) !== -1 : true)
    })
  }

  inputClick(searchText) {
    if (searchText != "") {
      this.searchValue.push(searchText)
    } else {
      this.searchValue.splice(0, 1)
    }
  }

.html

<input type="text" [(ngModel)]="searchText" (keyup.enter)="inputClick(searchText)">

<table>
  <thead>
    <tr>
      <td><strong>Name</strong></td>
      <td><strong>Group</strong></td>
      <td><strong>Age</strong></td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of filteredArray">
      <td>{{ user.name }}</td>
      <td>{{ user.group }}</td>
      <td>{{ user.age }}</td>
    </tr>
  </tbody>
</table>

这可以正常工作（如果您在input中键入内容并按ENTER，它将出现；如果您删除并按ENTER，它将还原为初始数组）

如您所见，为此，我对列表的每个字段进行了过滤：

(this.searchValue.length > 0 ? this.searchValue.indexOf(user.name) !== -1 : true) || 
(this.searchValue.length > 0 ? this.searchValue.indexOf(user.group) !== -1 : true) || 
(this.searchValue.length > 0 ? this.searchValue.indexOf(user.age) !== -1 : true)

我的问题是：如何避免使用return语句中的所有字段？因为在我的数据库中，我有30多个字段，因此很难编写30个不同的||。

此外，如果我写的是joh而不是john，该如何修改我的代码以仍然找到该条目？

感谢您的宝贵时间！ Here you can see a working snippet of my project

Answer 1

您可以编写一个函数遍历所有字段并检查所有字段。

containsValue(userObj, searchValue){
    return Object.values(userObj).reduce((prev, cur) => {
        cur = cur.toString();
        return prev || cur.indexOf(searchValue) > -1;
    }, false)
}

在当前函数中将此方法用作

get filteredArray(){
    ...
    return this.userList.filter((user) => this.containsValue(user, this.searchValue));
}

编辑：如果您未使用ES2017，则将Object.values（）更改为Object.keys（）并以userObj [cur]的形式获取“ cur”值。因此对于es2017之前的版本：

containsValue(userObj, searchValue){
    return Object.keys(userObj).reduce((prev, cur) => {
        let temp = userObj[cur].toString();
        return prev || temp.indexOf(searchValue) > -1;
    }, false);
}

Answer 2

我本来可以使用反应式的FormControl，但这不是您要的。
我修改了您的解决方案以获取用户属性，并检查您的searchText是否与您的用户属性之一中的值匹配。

See this stackblitz

在不带管的表Angular 6中搜索

2 个答案: