Материал Angular добавить регулярные выражения (регулярное выражение) для фильтрации - PullRequest
0 голосов
/ 24 января 2019

Я хочу использовать регулярное выражение в фильтре данных таблицы материалов.До сих пор я добился использования фильтра для каждого столбца в моей таблице, но не знал, как приблизиться к функциональности регулярных выражений.Я читал об изменении customfilterpredicate, но, похоже, не могу этого сделать.

Мой код фильтрации очень длинный, но вот как выглядит мой customfilterpredicate.Я хочу преобразовать его с помощью выражений регулярных выражений:

customFilterPredicate() {
    const myFilterPredicate = (data: IApiDataFile, filter: string): boolean => {
      const searchString = JSON.parse(filter);
      const unitFound = data.unit.toString().trim().toLowerCase().indexOf(searchString.unit.toLowerCase()) !== -1;
      const file_nameFound = data.file_name.toString().trim().toLowerCase().indexOf(searchString.file_name.toLowerCase()) !== -1;

      if (searchString.topFilter) {
        return unitFound || file_nameFound;
      } else {
        return unitFound && file_nameFound;
      }
    };
    return myFilterPredicate;
  }
  
 filterSubscribe() {
    this.unitFilter.valueChanges.subscribe(unitFilterValue => {
      this.filteredValues.unit = unitFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
      this.filteredValues.topFilter = false;
      console.log('in filterSubscribe()');

    });

    this.file_nameFilter.valueChanges.subscribe(file_nameFilterValue => {
      this.filteredValues.file_name = file_nameFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
      this.filteredValues.topFilter = false;
    });
    this.dataSource.filterPredicate = this.customFilterPredicate();
  }

затем

 public ngOnInit() {
    interval(60 * 1000).pipe(
        flatMap(() => this.ApiDataFileService.getApiDataFiles())).subscribe(
        ApiDataFiles => {
            this.filteredApiDataFiles = ApiDataFiles;
            this.dataSource = new MatTableDataSource<IApiDataFile>(this.filteredApiDataFiles);
            this.filterSubscribe();
            this.dataSource.filter = JSON.stringify(this.filteredValues);
            this.filteredValues.topFilter = false;
        },
        error => this.errorMessage = error as any
      );
  }

1 Ответ

0 голосов
/ 25 января 2019

Используйте свойство filterPredicate источника данных.Если ваш dataSource типичен для примеров

  dataSource = new MatTableDataSource(ELEMENT_DATA);

Вы можете определить переменную regExpr, которая изменится в applyFilterFunction

  regExpr:any;  //<--define a variable

  applyFilter(filterValue: string) {
    this.regExpr = new RegExp(filterValue);
    this.dataSource.filter = filterValue;
  }

, тогда вы можете создать такую ​​функцию, как

regExprFilter()
  { 
    return (data: any, filter: string) => {
        try {
          return this.regExpr.test(data.name)
        } catch (e) {
          return false
        }
      }
  }

И в ngOnInit измените filterPredicate

ngOnInit() {
    this.dataSource.filterPredicate =this.regExprFilter()
}

см. stackblitz

ПРИМЕЧАНИЕ. Я отредактировал свой ответ, чтобы сделать более удобный код

NOTE2: Будьте осторожны, используя regExp, если вы хотите определить строковую переменную в коде.вам нужно взять учетную запись "\" должно быть написано как "\\", например

  let myExpresion="^\w" //BAD, myExpresion get the value "^w"
  let myExpresion="^\\w" //GOOD, myExpresion get the value "^\w"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...