@zlodiak

Как скрыть реализацию в angular?

В шаблоне выводится список. Некоторые элементы этого списка не должны показываться(зависит от режима, который хранится в переменной компонента modeDisplay). Код в шаблоне приблизительно такой:
<div  class="inner item" *ngFor="let todo of todos" [ngClass]="{hidden: checkModeDisplay(todo.fields.isCompleted)}">
  ...........
</div>


Как видите, видимость устанавливает функция checkModeDisplay(). Выглядит она так:
private modeDisplay: string = 'all';

  private checkModeDisplay(isCompleted): boolean {
    let hidden = false;

    if(this.modeDisplay == 'active' && isCompleted) {
      hidden = true;
    } 

    if(this.modeDisplay == 'completed' && !isCompleted) {
      hidden = true;
    }     

    return hidden;
  };


Углубляться в понимание кода не надо, вопрос несколько в другом. Дело в том, что мне хотелось бы другого решения(не обязательно лучшего, просто другого - для расширения кругозора). Я хотел бы чтобы условие видимости/невидимости отрабатывалось другим образом.

Например, в angularJS можно было создать директиву и передавать в неё те аргументы, которые я в представленном решении передаю в checkModeDisplay(). Но в современном angular, насколько я знаю, такое невозможно потому что директива с шаблоном это - новый компонент. А создавать новый компонент для такой простой ситуации это избыточно.
  • Вопрос задан
  • 266 просмотров
Решения вопроса 1
vitali1995
@vitali1995
У вас действительно очень некрасивое решение. Грамотнее сделать так:

get displayedTodos() {
  if (this.modeDisplay == 'active')
    return this.todos.filter(todo => !todo.fields.isCompleted);

  if (this.modeDisplay == 'completed')
    return this.todos.filter(todo => todo.fields.isCompleted);

  return this.todos;
}


Отображать так:
<div  class="inner item" *ngFor="let todo of displayedTodos">
  ...........
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Coder321
в чем проблема отфильтровать todoы перед тем как выводить на страницу?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы