Question

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

然而我想要的是当我点击不同的项目时，我希望隐藏所有下拉列表并仅显示当前点击的下拉列表。

这是否可以在angular2中进行？

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

这是我的代码：

// 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来表明我的问题。

对于这个美好的社区，我们将非常感谢您的帮助！

Answer 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

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

1 个答案: