Angular 7 - одна функция с несколькими выпадающими

Question

У меня есть пользовательские выпадающие списки, которые я пытаюсь выяснить, если есть способ выполнить вызов функции и не вызывать их все сразу.

Я понимаю, что существуют варианты, которые могут выполнять раскрывающиеся списки, однакоКоманда, с которой я работаю, обеспечивает дизайн выпадающего списка, и мы должны заставить его работать.С учетом сказанного я уверен, что проделал долгий путь, и вы, умные люди, можете помочь мне упростить процесс.В настоящее время для каждого dropdown/select я создаю свою собственную функцию для переключения класса с именем active.Когда он активен, пользователь может видеть варианты выбора.Если класса нет, он выглядит как поле ввода.

HTML

<div class="row">
  <div class="col-md-6">
    <label class="required">Which option do you want below? </label>
  </div>

  <div class="col-md-4">
    <div class="select-group dropdown {{optionIsActive}}">
      <div class="drop-group-text select" <b>(click)="toggleOption()</b>">
        <input id="option_choice" name="Option Choice" value="Please Choose">
        <div class="dropdown-menu">
          <ng-container *ngFor="let item of optionChoice | wfsort">
            <ng-container *ngIf="!item.isHidden">
              <a (click)="selectDropdown(item.value)">{{item.label}}</a>
            </ng-container>
          </ng-container>
        </div>
      </div>
      <div *ngIf="submitted && optionChoice.length>0" class="alert alert--danger">
        <span class="error">This field is required. <span class="icon-chevron-up"></span></span>
      </div>
    </div>
  </div>
</div>

Компонент

optionIsActive = '';
optionSelection = [];
submitted = false;
optionChoice = [];

constructor(private data: DataService) {
  this.data.getData.subscribe(response => dropDownData(response))

  dropDownData(data) {
    data.filter((v) => {
      v.id === 'xyz' ? this.optionChoice = v.dataStuff : '';
    });
  }

  toggleOption() {
    this.optionIsActive === '' ? this.optionIsActive = 'active' : this.optionIsActive = '';
  }

  selectDropdown(data) {
    this.optionSelection.splice(0, 1, data);
    (document.getElementById('option_choice') as HTMLInputElement).value = data;
  }
}

Длинная история, короткая - ключевые функции toggleOption и selectDropdown.Есть ли способ сделать эту функцию для всех раскрывающихся списков, не вызывая их все сразу или не создавая функцию для каждого раскрывающегося списка?

Answer 1

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

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