Перенос фильтра ng-repeat в Typescript - PullRequest
Новая
       12

Перенос фильтра ng-repeat в Typescript

0 голосов
/ 10 февраля 2020

Мой проект был написан на AngularJS, и теперь он мигрирует на современный Angular 8.

Один из шагов миграции - переписать код с Javascript на Typescript. И я столкнулся с непростой проблемой с функцией фильтра ng-repeat.

Что у меня было. Шаблон HTML: 

<div ng-repeat="menuItem in items| filter: vm.filterMenuItem">

Немного странно, что при вызове функции вам не нужно указывать переданный аргумент.

И код JS: 

function filterMenuItem(menuItem) {
  let paramFits = vm.filters.param === 0 || menuItem.param === vm.filters.param;
  let anotherParamFits = vm.filters.anotherParam === 0 || menuItem.anotherParam === vm.filters.anotherParam;

  return paramFits && anotherParamFits;
 }

Где vm.filters - переменная уровня контроллера, которую можно изменить из шаблона.

Затем я переписал его в TS: 

filterMenuItem(menuItem: MenuItemClass) {
  let paramFits = this.filters.param === 0 || menuItem.param === this.filters.param;
  let anotherParamFits = this.filters.anotherParam === 0 || menuItem.anotherParam === this.filters.anotherParam;

  return paramFits && anotherParamFits;
}

... и все сломалось. По некоторым причинам AngularJS не распознает соответствующий рычаг контроллера this внутри функции. В этом случае this не определено.

Есть ли способ сохранить пользовательскую функцию фильтра с помощью Typescript?

1 Ответ

1 голос
/ 10 февраля 2020

Пользовательская функция фильтра должна быть изменена: 

filterMenuItem(menuItem: MenuItemClass, filters) {
    return menuItem => {
      let paramFits = filters.param === 0 || menuItem.param === filters.param;
      let anotherParamFits = filters.anotherParam === 0 || menuItem.anotherParam === filters.anotherParam;

       return paramFits && anotherParamFits;
   }
}

И шаблон HTML должен быть изменен следующим образом: 

<div ng-repeat="menuItem in items | filter: vm.filterMenuItem(menuItem, vm.filters)">

Ключ изменяется:

  • Теперь мы должны явно сказать, какой объект (menuItem) мы хотим проверить с помощью фильтра и критериев фильтра (vm.filters), и передать его явно функции. И вызовов this нет.
  • функция фильтра не должна просто возвращать логическое значение. Он должен возвращать предикат функцию с вычислением внутри него.
...