如何使用angular2

时间:2018-10-17 09:57:29

标签: angular typescript

我正在使用表格,其中在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;
  }

1 个答案:

答案 0 :(得分: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及其属性的一些假设给出的。根据表和行属性进行更改。