Ionic 3 pipe to filter list by comparing 2 arrays

问题:

I need help to write a filter PIPE component that will filter and display only the job posts that contains the selected search array words. Found a way to return by using 1 search value but i need it to return multiple search result in an array

jobCategory=['admin','clerk','driver','labour','helper']
selectedCategory=['driver','helper']

HTML:

<ion-item *ngFor="let posting of (postingList | postingFilter:'jobCategory':selectedCategory)"  >

PIPE:

export class PostingFilterPipe implements PipeTransform { 
transform(items: any[], field : string, value : string): any[] {  
  if (!items) return [];
  if (!value || value.length == 0) return items;
  return items.filter(it => {
    for (let index = 0; index < value.length; index++) {
      const element = value[index]; ***STUCK***
    }

  });
}

}

回答1:

You can try something like this :

export class PostingFilterPipe implements PipeTransform { 
  transform(items, field : string, value): any[] {  
    if (!items) return [];
    if (!value || value.length == 0) return items;
    return items.filter(it => value.filter(val => it[field].includes(val)).length > 0)
  });
}

回答2:

I wonder if the field argument/parameter is needed at all in this case. I have not tested this but I would try to pass the array of the selected categories as the argument. Then try to use the Array.includes() to return only the job categories that have been selected (are in the selected category array).

Hope that helps :) Let me know if that is not what you meant.

jobCategory=['admin','clerk','driver','labour','helper']
selectedCategory=['driver','helper']

PIPE:

export class PostingFilterPipe implements PipeTransform { 
  // items => array to filter through
  // field => field name (not needed??)
  // array of selected categories
  transform(items: any[], field : string, selectedValues: string[]): any[] {  
    if (!items) return [];
    if (!value || value.length == 0) return items;

    return items.filter(item => {
      return value.includes(item);
    });
  }
}

HTML:

<ion-item *ngFor="let posting of (postingList | postingFilter:selectedCategory)"  >