时间戳

首页 > 解决方案 > 如何访问多个下拉列表中的每个下拉列表

angular - 如何访问多个下拉列表中的每个下拉列表

问题描述

如何使用 viewchildren 访问我的每个下拉列表？

下拉列表通过ngfor.

使用viewchildren，每当我单击打开一个时，另一个不会关闭或有时不会打开。请帮忙。

   <div #dropdown class="dropdown is-right" [id]="comment._id">
          <div class="dropdown-trigger">
            <a class="actionBtn" aria-haspopup="true" aria-controls="dropdown-menu3" (click)="toggleDropdown(comment._id)">
                <img src="../../../../assets/more.png" alt="">
            </a>
          </div>
          <div>
              <div class="dropdown-menu" id="dropdown-menu3" role="menu">
                  <div class="dropdown-content">
                    <a href="#" class="dropdown-item">
                      Overview
                    </a>
                    <a href="#" class="dropdown-item">
                      Modifiers
                    </a>
                  </div>
                </div>
          </div>
        </div>


@ViewChildren('dropdown') dropDown: QueryList<any>

toggleDropdown(comment_id) {
this.dropdown = this.dropDown.find(x => x.nativeElement.attributes.id.nodeValue == comment_id)
if (this.dropdown.nativeElement.classList.contains('is-active') === false) {
  this.dropdown.nativeElement.classList.add('is-active')
} else {
  this.dropdown.nativeElement.classList.remove('is-active')
 }
}

标签： angulardropdown

解决方案

我假设您正在尝试将is-active类添加到单击的下拉列表中，并从所有其他下拉列表中删除相同的类。toggleDropdown如果是这样，那么你的逻辑就有缺陷。您正在使用数组和切换类识别单击的find下拉dropDown列表is-active。但是，您不会is-active从任何其他已经打开的下拉列表中删除课程。您可以遍历所有下拉列表 - 然后is-active为单击的下拉列表切换类并is-active从其他下拉列表中删除。

toggleDropdown(comment_id) {
    this.dropDown.forEach(dropdown => {
        if(dropdown.nativeElement.attributes.id.nodeValue == comment_id){
            dropdown.nativeElement.classList.toggle('is-active');
        } else{
            dropdown.nativeElement.classList.remove('is-active')
        }
    });    
}

推荐阅读