Question

我正在使用Angular 4和bootstrap开发一个网络应用，我在导航侧栏中使用了此代码，该代码可让我可视化下拉菜单元素。它是用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
}

不知道您要实现的确切逻辑，但这可能会给您一些启示。

下拉菜单栏

1 个答案: