Angular 7. Бесконечно перебирать между 3 состояниями при нажатии (для упорядочивания таблицы)

#angular #typescript

#angular #typescript

Вопрос:

Я хочу упорядочить таблицу в Angular 7, и когда я нажимаю на заголовок, я хочу переключаться между 3 состояниями (asc, desc, отключено). Каков наилучший способ бесконечного повторения между этими 3 состояниями в typescript?

Ответ №1:

Вы могли бы создать переменную, которая содержит это состояние.

let currentFilter = 0;

myState = [asc, desc, disabled];

и затем (click)="onFilter()"

с помощью метода onFilter() { this.currentFilter === 2 ? this.currentFilter = 0 : this.currentFilter = 1 }

при этом у вас уже есть текущее состояние, и при нажатии вы выполняете итерацию по трем состояниям.. вы даже можете добавить его в свою разметку с <span>{{ myState[currentFilter] }}</span> помощью .

Однако в логике фильтрации вам нужно создать метод сортировки и Idk, если у вас уже есть этот набор. вы можете вызвать его внутри onFilter() метода, а затем использовать новые значения.

Если вы хотите, чтобы все было проще и чище, я бы выбрал:

 filter = {
   currentFilter: 0,
   state: [asc, desc, disabled],
   onFilter: this.onFilter // basically putting the onFilter function here
}
  

а затем используйте этот объект для выполнения итераций. Вы даже можете экспортировать его как класс где-нибудь и повторно использовать его везде, где хотите выполнить фильтрацию.

 export class TableFilter {
    currentFilter = 0;
    state = [asc, desc, disabled];
    onFilter() { ... };
}
  

и в вашем компоненте

 filter = new TableFilter();
  

а затем используйте это

Комментарии:

1. Отличная идея, Франциско. Это работает отлично. Большое спасибо