Панель выпадающего меню

Question

Я разрабатываю веб-приложение с Angular 4 и загрузчиком, у меня есть этот код, который я использую в боковой панели навигации, которая позволяет мне визуализировать элемент выпадающего меню.он был написан на JavaScript, я внес некоторые изменения в синтаксис, чтобы превратить его в метод TypeScript, который вызывается при каждом нажатии кнопки раскрывающегося списка.Проблема в том, что кнопка не реагирует на нажатие, пока я нажимаю несколько раз, чаще всего дважды, что создает ощущение, что боковая панель не реагирует.Связано ли это с тем, что я не использовал этот код в теге внутри html-файла и что метод вызывается из файла component.ts?

`

onClickItem() {
    const dropdown = document.getElementsByClassName('dropdown-btn');
    let i;

    for (i = 0; i < dropdown.length; i++) {
      dropdown[i].addEventListener('click', function () {
        this.classList.toggle('active');
        const dropdownContent = this.nextElementSibling;
        if (dropdownContent.style.display === 'block') {
          dropdownContent.style.display = 'none';
        } else {
          dropdownContent.style.display = 'block';
        }
      });
    }
  }`

Answer 1

Причина, по которой это происходит, заключается в том, что вы должны использовать синтаксис angulars для этого.Например, шаблон:

component.html

<ul>
  <li *ngFor="let item of dropdownItems" (click)="toggleHidden(item)" [class.hidden]="item.hidden">{{ item.text }}</li>
</ul>

component.ts

interface DropdownItem {
  text: string;
  id: string;
  hidden?: boolean;
}

public dropdownItems = [
 { text: 'item 1', id: '1' },
 { text: 'item 2', id: '2' },
 { text: 'item 3', id: '3' },
];

public toggleHidden(dropdownItem: DropdownItem) {
  dropdownItem.hidden = !dropdownItem.hidden
}

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