更新

Question

我知道这个问题可能已被问过数千次，但我找不到有关angular2的正确解决方案。

所以我有一张桌子，我为从服务器获取的每一行设置数据。因此我有ngFor：

＆＃13;

<table class="table table-hover mb-0 hidden-sm-down table-curved">
  <tbody>
    <tr *ngFor="let module of modules; let index = index" #moduleObject >
      <td class="text-center"><md-checkbox></md-checkbox></td>
        <td>
          <a class="test" (click)="module._clicked = !module._clicked"></a>
          <ul class="dropdown-menu table-dropdown" role="menu" [ngClass]="{'table-dropdown-open' : module._clicked}">
            <li><a (click)="_showDialogue =! _showDialogue; _getModuleCode(module)">Edit Module</a></li>
            <li><a (click)="removeModule(module.Code)" >Remove Module</a></li>
          </ul>
        </td>
    </tr>
  </tbody>
</table>

＆＃13;

所以每一行都是这样的：

我有一个切换功能，当你点击3个点时，它会显示一个下拉框，如下所示：

但切换功能有两个问题，老实说，我不知道如何修复：

1 - 当您点击3个点时，它适用于前两次点击，之后当您点击另一行的3个点时，它不会工作（意味着您必须双击为了显示下拉列表。

2 - 目前我的切换效果仅在我必须点击3个点时发生，但我希望在用户点击其他行时实现这一点。 3点，其他地方显示的下拉隐藏。当用户点击其他任何地方时，它也会隐藏其余的下拉列表。

第二对我来说很难，所以我有一种非常低效的方式来隐藏下拉列表。

＆＃13;

CloseAllDropDown() {
  //console.log(a)
  var dropdown = document.getElementsByClassName('table')[0].querySelectorAll('ul');
  for (let i = 0; i < dropdown.length; ++i) {
    document.getElementsByClassName('table-dropdown-open')[0].classList.remove('tabl‌e-dropdown-open');
  }
}

＆＃13;

我如何实现上述两个清单？

更新

＆＃13;

<tbody>
  <tr *ngFor="let module of modules; let index = index" #moduleObject >
    <td class="text-center"><md-checkbox></md-checkbox></td>
    <td (clickOutside)="visible = false">
      <a class="test" (click)="module._clicked = !module._clicked"></a>
      <ul class="dropdown-menu table-dropdown" role="menu" [ngClass]="{ 'table-dropdown-open' : module._clicked }" >
        <li><a (click)="_showDialogue =! _showDialogue; _getModuleCode(module)">Edit Module</a></li>
        <li><a (click)="removeModule(module.Code)" >Remove Module</a></li>
      </ul>
    </td>
  </tr>
</tbody>

＆＃13;

Answer 1

您可以创建指令：

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';

@Directive({
     selector: '[clickOutside]'
})
export class ClickOutsideDirective {
   constructor(private _elementRef: ElementRef) {}

@Output()
public clickOutside = new EventEmitter<MouseEvent>();

@HostListener('document:click', ['$event', '$event.target'])
public onClick(event: MouseEvent, targetElement: HTMLElement): void {
    if (!targetElement) {
        return;
    }

    const clickedInside = this._elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
        this.clickOutside.emit(event);
    }
}}

然后你可以把它叫到你想要的地方。例如：

<div (clickOutside)="visible = false"</div>

Angular2在ngFor中显示/隐藏下拉列表，并在其他任何地方点击时隐藏？

更新

1 个答案: