Html Angular2在ngFor中显示/隐藏下拉列表，并在单击其他位置时隐藏？

我知道这个问题可能被问了几千次，但我找不到任何正确的解决办法

所以我有一个表，我为从服务器获取的每一行设置数据。因此，我有一个

ngFor

：

编辑模块
移除模块

您可以创建指令：

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);
    }
}}

import{Directive，ElementRef，Output，EventEmitter，HostListener}来自“@angular/core”；
@指示({
选择器：“[单击外部]”
})
导出类ClickOutside指令{
构造函数（私有_elementRef:elementRef）{}
@输出（）
public clickOutside=new EventEmitter（）；
@HostListener（'文档：单击'，['$event'，'$event.target']））
public onClick（事件：MouseEvent，targetElement:HTMLElement）：void{
如果（！targetElement）{
返回；
}
const clickedInside=此。_elementRef.nativeElement.contains（targetElement）；
如果（！clickedInside）{
点击outside.emit（事件）；
}
}}

然后你可以在你想叫的地方叫它。例如：

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

---

问题在于，您正在循环内部使用
return
。一旦第一次满足任一条件，该函数将“结束”，而不针对任何后续
s进行循环检查。要关闭单个元素的所有下拉列表，您需要在for循环中使用另一个
querySelectorAll
——您根本不需要
if
条件：）嗯，请您在这一点上再缩写一下。我该如何解决我的第一个选择@ObsidiageIt听起来您需要类似以下内容：
document.getElementsByClassName（'table-dropdown-open'）[0].classList.remove（'table-dropdown-open'）。无论何时调用
CloseAllDropDown
，都应该删除每个元素的类。第一点应该通过简单地不在循环中使用
return
来解决。我明白你的意思了。但这仍然不能解决第一点，因为第一点说，当我点击特定的3个点时，只有下拉菜单显示，其余的隐藏@ObsidianAge@G你有什么想法吗，伙计？我见过你回答这么多有棱角的问题。如果您单击其他任何位置并隐藏下拉框，将非常感谢您的帮助？我在哪里给出这个条件
（单击外部）=“可见=假”
？在我的点击事件中？我是否要从我的
a
tagYes中删除
（点击）
事件。把它放在第二个td上。不，点击a。我在上面添加了最近的代码。请在更新部分下查看。它对我不起作用。我刚刚发布了“visible”变量作为示例。您必须将其更改为您使用的模块，即-module。因此，您必须执行（单击外部）=“模块.\u单击=错误”