Angular 2：Typescript：根據提供的過濾條件過濾網格數據

Question

我在我的網格（列表）中使用動態列過濾。如果我要應用靜態過濾條件，它會按預期工作。但是當我用動態列嘗試它時，它不起作用，有些我必須用動態列調用，因爲在同一列上應該有多個條件也適用於多列。它不會把我的錯誤，但不過濾任何記錄

過濾器面板：

靜態過濾器（工作）：

this.GridData.filter(a => a.Scope == 'Framework'); 

動態過濾器（不工作）：

let _condition = "a.Scope == 'Framework'"; 
this.GridData.filter(a => _condition); 

要求工作的動態條件。

Answer 1

你要調用的方法，在下面的過濾功能。

let value = 'Framework'; 
this.GridData.filter(this.filterData.bind(gridData , value)); 

filterData(value,gridData) { 
     return gridData.Scope == value; 
    } 

Answer 2

這不會起作用，字符串不會自動轉換爲JavaScript表達式並進行評估。

函數a => "a.Scope == 'Framework'"始終匹配所有項，因爲它返回一個非空/非空白字符串，它是一個真值。

而不是使用動態評估（eval），從而承擔這種方法所暗示的嚴格的安全性，可讀性和可修復性損害，我建議創建一個相當簡單的謂詞構建器。

除了更可靠，可擴展且更易於維護之外，它還提供了一個令人愉快的機會，可以突出顯示JavaScript啓用的一些優雅編碼模式，以及哪些TypeScript可以讓我們進行雄辯指定。

下面是一個例子

export interface MemberInvocationExpression { 
    kind: 'memberInvocation'; 
    memberKey: keyof Project; // project is row type 
    args?: {}[]; 
    negated?: true; 
    conjunction: 'and' | 'or'; 
}; 

export interface MemberComparisonExpression { 
    kind: 'memberComparison'; 
    memberKey: keyof Project; 
    compareWith: {}; 
    negated?: true; 
    comparison: 'equal' | 'notEqual' | 'greater' | 'lesser'; 
    conjunction: 'and' | 'or'; 
} 

export type GridFilterExpression = 
| MemberInvocationExpression 
| MemberComparisonExpression; 

export default class { 
    gridFilterExpressions: GridFilterExpression[] = []; 

    composeFilters(): (p: Project) => boolean { 

    return this.gridFilterExpressions.reduce((composed, expression) => { 
     // every element except the first element, must specify this. 
     const conjunction = expression.conjunction; 

     const predicate = predicateFromExpression(expression); 

     switch (conjunction) { 
     case 'and': 
      return p => composed(p) && predicate(p); 
     case 'or': 
      return p => composed(p) || predicate(p); 
     default: 
      throw Error('Invalid composition'); 
     } 
    }, _ => true); 
    } 
} 

function predicateFromExpression(expression: GridFilterExpression) { 
    switch (expression.kind) { 
    case 'memberInvocation': 
     return predicateFromMemberInvocationExpression(expression); 
    case 'memberComparison': 
     return predicateFromMemberComparisonExpression(expression); 
    case // other filter expression kinds.... 
     default: throw Error('invalid filter'); 
    } 
} 

function predicateFromMemberInvocationExpression(expression: MemberInvocationExpression) { 
    const {memberKey, args, negated} = expression; 

    const predicate = (p: Project) => p[memberKey](...args); 

    return negated ? (p: Project) => !predicate(p) : predicate; 
} 

function predicateFromMemberComparisonExpression(expression: MemberComparisonExpression) { 
    const {memberKey, compareWith, comparison, negated} = expression; 

    const predicate = (p: Project) => { 
    switch (comparison) { 
     case 'equal': return p[memberKey] === compareWith; 
     case 'notEqual': return p[memberKey] !== compareWith; 
     case 'greater': return p[memberKey] > compareWith; 
     case 'lesser': return p[memberKey] < compareWith; 
     default: throw Error('Invalid comparison in filter'); 
    } 
    }; 

    return negated ? (p: Project) => !predicate(p) : predicate; 
} 

填充陣列，gridFilterExpressions或任何你選擇稱呼它，就留給讀者做練習，但是這是比較容易的部分。 嗯，這裏是根據你看到的過濾器的一個例子：

gridFilterExpressions 
    .push({ 
    memberKey: 'Scope', 
    compareWith: 'framework', 
    comparison: 'equal', 
    conjunction: 'and' 
    }, 
    { 
    kind: 'memberInvocation', 
    memberKey: 'endsWith', 
    args: ['test'], 
    conjunction: 'or' 
    });