Question

如何使用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')
 }
}

Answer 1

我假设您正在尝试将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')
        }
    });    
}

如何访问多个下拉菜单中的每个下拉菜单

1 个答案: