как сделать фильтр поиска?

Question

всем привет не судите строго за вопрос, только начинаю изучать)

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

  <div class="filter-block">
    <div class="filter-info-title">
      Тип
    </div>
    <li class="filter-btn pointer" (clickOutside)="typeDropdown = false" [ngClass]="{visible: typeDropdown}">
      <span class="filter-title" (click)="typeDropdown = !typeDropdown">
        **здесь должен быть выбранный из выпадающего меню фильтров фильтр**
      </span>
      <div class="arrow"></div>
      <div class="filter-btn__dropdown city-wrapper" [ngClass]="{visible: typeDropdown}" *ngFor="let filter of filters">
        <div class="filter-btn__dropdown-menu" *ngIf="filter.key == 'firm_category'">
          <a class="filter-btn__dropdown-menu-item" *ngFor="let option of filter.options">
            {{ option.title }}
          </a>
        </div>
      </div>
    </li>
  </div>

Answer 1

надеюсь правильно тебя понял, вот примерный код того что ты хочешь

example.component.html

 <div class="filter-block">
    <div class="filter-info-title">
      Тип
    </div>
    <li class="filter-btn pointer" (clickOutside)="typeDropdown = false" [ngClass]="{visible: typeDropdown}">
      <span class="filter-title" (click)="typeDropdown = !typeDropdown">
        {{ selectedFilter }}
      </span>
      <div class="arrow"></div>
      <div class="filter-btn__dropdown city-wrapper" [ngClass]="{visible: typeDropdown}" *ngFor="let filter of filters">
        <div class="filter-btn__dropdown-menu" *ngIf="filter.key == 'firm_category'">
          <a class="filter-btn__dropdown-menu-item" *ngFor="let option of filter.options" (click)="selectFilter(option.title)">
            {{ option.title }}
          </a>
        </div>
      </div>
    </li>
  </div>

example.component.ts

public selectedFilter: string;

// ...

public selectFilter(filter: string): void {
  this.selectedFilter = filter
}

Немного обьясню что происходит, на каждый элемент ngFor мы указыва функцию на клик которая принимает как параметр название фильтра, либо сам фильтр (это может быть как обьект так и простой тип данных), ну присваеваем в переменную выбранный фильтр

Также такие вот действия в представлении: typeDropdown = !typeDropdown я бы советовал всё таки вынести в компонент (ts файл), это неявная логика и вообщемто принято разделять логику от представления, инлайн функции не приветствуются

БЛОГ НА HUSL

как сделать фильтр поиска?

Ответы (1 шт):