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

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

       } 
      }); 
     } 
    } 
} 

同时检查plunker我曾经看到它的工作（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; 
    } 
} 

这是未经测试，并且不漂亮呢。但你得到的总体思路