如何在Angular2的`ngFor`中仅显示单击元素的下拉列表？答案

【问题标题】：How to show drop-down for only clicked element in `ngFor` in Angular2?如何在Angular2的`ngFor`中仅显示单击元素的下拉列表？
【发布时间】：2017-07-16 06:40:18
【问题描述】：

我有一个使用ngFor 在表格中显示的项目列表，每个项目都有一个相应的下拉框，只有当您单击该项目时才会显示该下拉框。问题是，我只想显示被点击的下拉框并隐藏之前打开的其余项目的下拉框。目前，我可以为多个项目打开一个项目的下拉框。但是，我只想显示单击项目的下拉列表。例如：

但是我想要的是，当我点击不同的项目时，我希望所有的下拉菜单都隐藏起来，只显示当前点击的一个。

这可以在angular2中做到吗？

我有一个查找点击事件并切换它们的指令，它仅用于显示/隐藏，但我不知道如何解决我当前的问题：

这是我的代码：

// assume necessary imports {..}...
@Directive({
  selector: '[rbDropdown]'
})
export class NgDropdownDirective {
  constructor(private _ref: ElementRef) {}

  @HostBinding('class.open') get opened() {
    return this.isOpen;
  }

  @HostListener('click', ['$event', '$event.target']) open() {
    console.log(this._ref.nativeElement);
    //this._ref.nativeElement.children[1].classList.add('table-dropdown-open');
    if (this._ref.nativeElement.children[1].classList.contains('table-dropdown-open')) {
      this._ref.nativeElement.children[1].classList.remove('table-dropdown-open');
      this.isOpen = false;
    } else {
      this.isOpen = true;
      this._ref.nativeElement.children[1].classList.add('table-dropdown-open');
    }
  }
  private isOpen = false;
}

这是我的ngFor 我拥有的物品：

<tbody>
  <tr *ngFor="let module of modules">
    <td class="text-center">
      <md-checkbox></md-checkbox>
    </td>
    <td>
      <div><span class="title-Code">{{module.Code}}</span></div>
      <div class="small text-muted"><span>{{module.Name}}</span></div>
    </td>
    <td>{{ module.Credit}}</td>
    <td>{{ module.Structure }}</td>
    <td>{{ module.Tags }}</td>
    <td>{{ module.LastEdit }}</td>
    <td rbDropdown>
      <a class="test" #thisTag></a>
      <ul class="dropdown-menu table-dropdown" role="menu">
        <li>
          <a (click)="_showDialogue =! _showDialogue; _getModuleCode(module)"><img src="../../assets/img/pencil.svg" alt="" width="13px">Edit Module</a>
        </li>
        <li>
          <a (click)="removeModule(module.Code)"><img src="../../assets/img/delete.svg" alt="" width="13px">Remove Module</a>
        </li>
      </ul>
    </td>
  </tr>
</tbody>

对不起，我不知道如何使用 plunker 来显示我的问题。

非常感谢您对这个精彩社区的帮助！

【问题讨论】：

概括你的问题 - 你有几个保管箱，你想隐藏每个人都希望点击的？
我对每一行都有一个下拉框，但它们最初是隐藏的，只有在您单击它们时才可见。但目前我可以显示多个项目的下拉框，如果我点击另一个项目，它们会保持打开状态，但回答你的问题？是的@Kinduser

标签： angular typescript angular2-directives dropdownbox ngfor

【解决方案1】：

为简单起见，我使用了以下模板

 <div *ngFor="let item of data">
     {{id}} &nbsp; &nbsp; &nbsp; &nbsp; 
     <button (click)="showItems($event)"> {{item.class}} </button>
     <students style="visibility:hidden" [studentsList]="item.studentsList"> </students>
</div>

学生组件如下所示

<div *ngFor="let item of studentsList">
          {{item.id}} &nbsp; &nbsp; &nbsp; &nbsp; 
               <button> {{item.name}} </button>
</div>

方法

showItems(val){

    val.srcElement.nextElementSibling.style['visibility']="visible";

}

此方法将切换相应的元素，如果遵循这样的层次结构。

LIVE DEMO

【讨论】：