Question

我有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']
}]

以下是SearchPipe -

不搜索结果数组

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

}

非常感谢任何帮助 - 谢谢！

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

              }
          });
      }
  }
}

同时检查我以前看到它使用的弹药（https://plnkr.co/edit/ntyDUEwe0HXwjeupqDUr?p=preview）

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

它未经测试，而且还不够漂亮。但是你得到了一般的想法

Angular 2 Search Pipe过滤具有数组属性的对象

2 个答案: