具有數組屬性的Angular 2 Search Pipe過濾器對象

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錯誤。 它不會返回true或false。 您可以將管道更改為類似內容，並搜索字符串中是否包含某些內容，然后相應地返回布爾值。

像這樣：

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

它未經測試，還不是很漂亮。 但是你有一般的想法