javascript - 如何一次打开一个弹出窗口并在Angular2中单击外部时关闭弹出窗口

Question

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

HTML:

<td>
          <a (click)="editCondition(rowData)">
            <i class="fa fa-ellipsis-h" style="color:#0847a1"></i>
          </a>
          <div class="switch-list" id="switch-list" *ngIf="rowData.isViewDetails">
            <a id="ccd_viewdetails" (click)="gotoViewDetails(rowData)">View Details</a>
            <a>Download</a>
          </div>
        </td>

TS:

 editCondition(rowData) {
    console.log(rowData);
    rowData.isViewDetails = !rowData.isViewDetails;
  }

这是工作演示:

https://stackblitz.com/edit/angular-c16wte?file=src/app/app.component.ts

Answer 1

只需重置ccdList的所有items即可。

需要对您的函数进行一些小更改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;
      })
    }
  }

工作副本在这里 - https://stackblitz.com/edit/angular-bbyz8n