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

Question

I have Angular 2 Search Pipe that filters against an array of Project[]. It works for every property except for one containing an array of strings.

Here is a sample of data model

[{
    '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']
}]

Here is the SearchPipe -

not searching against Outcome array

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

}

Any Help would be much appreciated - Thank you!

Answer 1

Your foreach is incorrect. It doesnt return true or false. You can change your pipe to something like this and search if it contains something in the string and then return a boolean accordingly.

Like so:

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

              }
          });
      }
  }
}

Also check the plunker I used to see it working ( https://plnkr.co/edit/ntyDUEwe0HXwjeupqDUr?p=preview )

Answer 2

The problem lies within the forEach loop you do. Returning true or false doesn't do what you expect.

A solution would be to move this logic to a separate function:

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

It's untested, and not pretty yet. But you get the general idea