如何使用angular2一次隐藏和显示一个弹出窗口

我使用的是table，其中在td中有一个名为details的字段，如果我单击下面打开的模式，如果我单击第二行，第一行v l将与第二行一起保持打开状态，因此我想打开最近单击的一行并关闭其余的

HTML:

---

好的是，您可以为每一行切换属性showDetailsList。现在，您的要求是隐藏其他人并显示最新的

所以我们需要做的是为表的每一行将showDetailsList设置为false，然后将当前行的showDetailsList设置为false

所以你的代码应该是-

在ts中 在html中 注：实现是基于tableData及其属性的一些假设。根据表和行属性进行更改

---

感谢您的回复，它可以正常工作，但单击此弹出窗口外部时不会关闭。在这种情况下，您需要检查用户是否在组件外部单击。若他这样做了，那个么您可以激活代码片段来隐藏所有行。你可以参考这一点来了解如何捕获用户是否在外部被单击-对不起，我的意思是，如果我再次单击该行，它必须被隐藏。我们需要捕获当前行状态showDetailsList并将其反转。答案会相应更新。

<div style="margin-top:34px;" *ngIf= "medicationTableValue.length >0">
      <p-table #dt [columns]="tableHeaders" [value]="medicationTableValue">
        <ng-template pTemplate="header" let-columns>
          <tr role="row">
            <th width="200">Name</th>
            <th class="line-height15">Reason for Taking</th>
            <th width="60">Details</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
          <tr [pSelectableRow]="rowData">
            <td>{{rowData.name}}</td>
            <td>{{rowData.Reason}}</td>
            <td>
              <a class="details" id="details1" (click)="detailsList(rowData)">
                <i class="fa fa-angle-down"></i>
              </a>
            </td>
          </tr>
          <tr *ngIf="rowData.showDetailsList">
            <td class="nes_table" colspan="8">
              <div>
                <table class="w-100 table table-bordered">
                  <tbody>
                    <tr>
                      <td width="150">Name</td>
                      <td>{{rowData.name}}</td>
                    </tr>
                    <tr> 
                      <td width="150">Date Started</td>
                      <td>{{rowData.date}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>

 detailsList(rowData) {
    rowData.showDetailsList = !rowData.showDetailsList;
  }

 detailsList(tableData, rowData) {
    let isHidden = rowData.showDetailsList;
    tableData.forEach(row=>{row.showDetailsList = false;}) //reset all rows of table
    rowData.showDetailsList = !isHidden;                      
  }

(click)="detailsList(medicationTableValue, rowData)"