具有数组属性的Angular 2搜索管道过滤器对象答案

【问题标题】：Angular 2 Search Pipe filter objects with array property具有数组属性的Angular 2搜索管道过滤器对象
【发布时间】：2016-11-02 22:30:22
【问题描述】：

我有 Angular 2 搜索管道，可以过滤 Project[] 数组。它适用于所有属性，除了包含字符串数组的属性。

这是一个数据模型示例

[{
    'Id': 2,
    'Title': 'Abc',        
    'Amount': '200',
    'Outcome': ['Outcome 2', 'Outcome 22', 'Outcome 222', 'Outcome 2222']
},
{
    'Id': 3,
    'Title': 'Abc',        
    'Amount': '300',
    'Outcome': ['Outcome 3', 'Outcome 333', 'Outcome 3333', 'Outcome 33333']
}]

这里是搜索管道 -

不搜索结果数组

export class SearchPipe implements PipeTransform {
transform(value, args?): Project[] {
    let searchText = new RegExp(args, 'ig');
    if (value) {
        return value.filter(project => {
            if (project) {
                return project.Title.search(searchText) !== -1
                    || project.Focus.search(searchText) !== -1
                    || project.Outcome.forEach(outcome => {
                        if (outcome.search(searchText) !== -1) {
                            return true;
                        }
                        else {
                            return false;
                        }
                    });
            }
        });
    }
}

}

任何帮助将不胜感激 - 谢谢！

【问题讨论】：

标签： arrays angular

【解决方案1】：

您的 foreach 不正确。它不返回真或假。您可以将管道更改为类似的内容并搜索它是否包含字符串中的某些内容，然后相应地返回一个布尔值。

像这样：

@Pipe({name: 'Search'})
export class Search implements PipeTransform {
  transform(value, args?) {
      let searchText = 'test';

      if (value) {
          return value.filter(project => {
              if (project) {
                  return  !project.Outcome.every(outcome => {
                              return (!outcome.includes(searchText))
                          });

              }
          });
      }
  }
}

还要检查我以前使用的 plunker 是否可以正常工作 (https://plnkr.co/edit/ntyDUEwe0HXwjeupqDUr?p=preview)

【讨论】：

【解决方案2】：

问题在于您所做的forEach 循环。返回 true 或 false 并不符合您的预期。

解决方案是将这个逻辑移到一个单独的函数中：

export class SearchPipe implements PipeTransform {
   transform(value, args?): Project[] {
    let searchText = new RegExp(args, 'ig');
      if (value) {
        return value.filter(project => {
            if (project) {
                return project.Title.search(searchText) !== -1
                    || project.Focus.search(searchText) !== -1
                    || this._checkArray(project.Outcome, searchText);
            }
        });
    }
  }

  _checkArray(arr, search) : boolean {
      let found: boolean = false;
      arr.forEach(outcome => {
                        if (outcome.search(search) !== -1) {
                            return true;
                        }
                    })
      return found;
  }
}

它未经测试，还不漂亮。但你明白了一般的想法

【讨论】：