Javascript 如何一次打开一个弹出窗口并在外部单击角度关闭弹出窗口2

我有一个弹出窗口，必须一次打开一个。它必须打开最近单击的，并隐藏以前单击的。 它也不会在外部单击时关闭。 谁能帮我解决这个问题

HTML:

以下是工作演示：

---

您可以尝试在应用程序中使用

HostListener

@HostListener('document:click', ['$event'])
clickOutside(){
  // do something
}

---

只需重置

ccdList

的所有

项即可

需要对函数进行一些小的更改
editCondition

 editCondition(rowData) {
    this.ccdList.forEach(item=>{
      item.isViewDetails = false;
    })
    console.log(rowData);
    rowData.isViewDetails = !rowData.isViewDetails;
  }

对于外部，请单击使用
HostListener

@HostListener('document:click', ['$event'])
  windowClick($event) {
    let exceptElementFound = false;
    Object.keys($event.target.classList).forEach(key => {
      if ($event.target.classList[key] == "fa-ellipsis-h") {
        exceptElementFound = true;
      }
    })
    if (!exceptElementFound) {
      this.ccdList.forEach(item => {
        item.isViewDetails = false;
      })
    }
  }

工作副本在这里-
感谢您的回复，如如何？看到那个演示了吗？我看到了你的演示，你能做的就是维护一个对应的
数组
的
布尔值
，它最初是
假
。当您单击其中一个弹出窗口时，您将数组的
索引
传递给处理程序，处理程序将
将
数组重置为
假
，并仅将该
索引
设置为
真
。您可以在.html中使用
ngIf
来隐藏和显示。对于单击外部，您可以使用
HostListener
感谢您的响应，但我不知道如何使用HostListener事件
 editCondition(rowData) {
    this.ccdList.forEach(item=>{
      item.isViewDetails = false;
    })
    console.log(rowData);
    rowData.isViewDetails = !rowData.isViewDetails;
  }

@HostListener('document:click', ['$event'])
  windowClick($event) {
    let exceptElementFound = false;
    Object.keys($event.target.classList).forEach(key => {
      if ($event.target.classList[key] == "fa-ellipsis-h") {
        exceptElementFound = true;
      }
    })
    if (!exceptElementFound) {
      this.ccdList.forEach(item => {
        item.isViewDetails = false;
      })
    }
  }