通过管道过滤多列，其中一个输入|Angular2

Question

我试图用用户输入过滤一个对象数组。但是，仅当我指定要过滤值的属性名称时，我才完成此操作。我将如何过滤每个属性值？

管道：

@Pipe({ name: 'columns' })
export class SearchPipe implements PipeTransform {
  transform(columns: any, filterText: any): any {
    if (filterText == null) return columns;
    return columns.filter(function(column) {
      return column.name.toLowerCase().indexOf(filterText.toLowerCase()) > -1;
    })
  }
}

模板：

<input [(ngModel)]="filterText" type="text">
<tr *ngFor='let office of offices | columns: filterText'>
  <td><input type="checkbox" checked class="i-checks" name="input[]"></td>
  <td>{{ office.officeId }}</td>
  <td>{{ office.name }}</td>
  <td>{{ office.createdAt | date:'longDate'}}</td>
  <td>{{ office.noOfPhones }}</td>
  <td>{{ office.address }}</td>
  <td>{{ office.region }}</td>
  <td>{{ office.status }}</td>
</tr>

Answer 1

您应该使用object.values（）获取列的所有值列表，如果一个值或多个匹配搜索：

，则返回true：

export class SearchPipe implements PipeTransform {
  transform(columns: any, filterText: any): any {
    if (filterText == null) return columns;
    // we lowercase here to avoir doing it multiple time
    filterText = filterText.toLowerCase();
    return columns.filter(function(column) {
        return Object.values(column)
                     .some(value => value.toLowerCase().indexOf(filterText) > -1);
    });
  }
}

注意：如果某些值不是字符串，则会丢弃错误，因此您应该在value.tolowercase（）;

上添加检查

警告2：由于object.values未实现，而是实现了object.keys（），因此无法在Internet Explorer上使用。

因此您可以使用

export class SearchPipe implements PipeTransform {
      transform(columns: any, filterText: any): any {
        if (filterText == null) return columns;
        // we lowercase here to avoir doing it multiple time
        filterText = filterText.toLowerCase();
        return columns.filter(function(column) {
            return Object.keys(column)
                         .some(key => column[key].toLowerCase().indexOf(filterText) > -1);
        });
      }
    }

希望它有帮助