Question

我正在使用表格，其中在td中我有一个称为详细信息的字段，如果我单击下面的模式打开，如果我单击第二行，则第一行vl与第二行一起保持打开状态，因此我想打开最近点击了一个，然后关闭了其余的。

HTML：

<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>

TS：

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

Answer 1

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

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

因此您的代码应类似于-

以ts

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

in html

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

注意：实现是基于tableData及其属性的一些假设给出的。根据表和行属性进行更改。

如何使用angular2

1 个答案:

以ts

in html