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>

及其外观：

Toggling

我还早些时候在标记中有* 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中使用index，因此可以使用collapsed[i]。看看这里在ngFor中使用索引：

ngFor using Index

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

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>

如何为表格的每一行创建展开/折叠功能？角度6

3 个答案: