Question

我有一张桌子，当我点击某一行时，我想在它下面显示另一行（有关该行的一些信息）。我不知道如何切换它，但也能够打开多个子行。不知何故，我需要根据行ID启用切换，这是我想出来的，但它并不像我需要的那样真正起作用。

<ng-container *ngFor=" let fields of mf.data; let i = index">
    <tr>
     <td (click)="expandCompareRow(i)">Something</td>
     <td>Something</td>
    </tr>

    <tr *ngIf="compareRowExpanded == i && expandedRow">
     <td>Something</td>
     <td>Something</td>
    </tr>
    </ng-container>

    TS: 
    expandCompareRow(index) {
        this.compareRowExpanded = index;
        this.expandedRow = !this.expandedRow;
      }

这会打开一行，但是当我想打开另一行时，它首先会关闭已经打开的行，然后我必须再次单击才能打开这一行。

Answer 1

对对象使用expanded属性并在其间切换，如下所示

<ng-container *ngFor=" let fields of mf.data; let i = index">
  <tr>
   <td (click)="expandCompareRow(fileds)">Something</td>
   <td>Something</td>
  </tr>

   <tr *ngIf="fields.expanded">
     <td>Something</td>
     <td>Something</td>
   </tr>
</ng-container>

打字稿代码

expandCompareRow(fields) {
    fields.expanded = ! fields.expanded;
  }

你甚至可以不用方法

来做

 <td (click)="fields.expanded = ! fields.expanded">Something</td>

根据ID切换行 - Angular 4

1 个答案: