Angular 2: Typescript: filter grid data based on filter condition

Question

I use dynamic column filtering in my grid (list). If I am going to apply a static filter condition, it works as expected. But when I tried it with a dynamic column, it didn’t work, some, as I need to call with a dynamic column, since there should be several conditions for one column for one column. This does not cause any error, but does not filter any record.

Filter Panel:

Static filter (working):

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

Dynamic filter (does not work):

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

The required dynamic condition for the job.

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