如何為表格的每一行創建展開/折疊功能？ Angular6

Question

因此，我需要能夠在表的每一行上擴展一些細節。 現在我有兩個問題：

• 單擊展開/折疊切換將觸發表中每一行的操作。
• 第一行始終將詳細信息放在其上方。

這是代碼段：

<tbody>
  <tr *ngFor="let client of clients">
    <td class="details-control">
        <a class="btn btn-link" (click)="collapsed1=!collapsed1">
            <i class="material-icons">
              expand_more
            </i>
        </a>
    </td>
    <td>{{client.firstName}}</td>
    <td>{{client.lastName}}</td>
    <td>{{client.company}}</td>
    <td><input type="checkbox"></td>
  </tr>
  <div *ngIf="!collapsed1">
    <p>Details</p>
  </div>

</tbody>

看起來像什么：

切換

另外，我之前在標記中有* ngFor語句，但是我意識到如果為細節建立一個單獨的客戶端對象，則無法打中各個客戶端對象。

讓我知道我可以如何改善！

Answer 1

這是非常常見的模式。 最好，最快的解決方案是在collapsed1變量中使用一些ID而不是布爾值。

<tbody>
 <tr *ngFor="let client of clients">
  <td class="details-control">
    <a class="btn btn-link" (click)="collapsed1 = collapsed1 ? 0 : client.id ">
        <i class="material-icons">
          expand_more
        </i>
    </a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
<div *ngIf="collapsed1=client.id">
  <p>Details</p>
</div>

Answer 2

您需要一個布爾數組collapsed[]並在ngFor中使用索引，因此可以使用collapsed[i] 。 看看這里在ngFor中使用index的方法：

ng用於使用索引

讓我知道您是否需要更多信息。 惠康

Answer 3

沒關系，這是解決它的代碼。

<tbody>
  <tr *ngFor="let client of clients; let i = index">
    <td class="details-control">
        <a class="btn btn-link" (click)="client.hideme=!client.hideme">
            <i class="material-icons" *ngIf="!client.hideme">
              expand_more
            </i>
            <i class="material-icons" *ngIf="client.hideme">
                expand_less
              </i>
        </a>
    </td>
    <td width="30%">{{client.firstName}}
      <tr *ngIf="client.hideme">
        <td>Hey, I'm a bunch of details!</td>
      </tr>
    </td>
    <td>{{client.lastName}}</td>
    <td>{{client.company}}
        <tr *ngIf="client.hideme">
            <td>More Issuer details</td>
        </tr>
    </td>
    <td><input type="checkbox"></td>
  </tr>
</tbody>