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，因此无法在Internet Explorer上运行，但自IE9起实施Object.keys()

所以你可以使用

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

希望有所帮助

通过管道过滤一个输入的多个列angular2

1 个答案: