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

Posted 2023-02-22

【中文标题】如何为表格的每一行创建展开/折叠功能？角6

【英文标题】：How can I create expand/collapse function for each row of table? Angular6

【发布时间】：2019-02-24 22:35:08

【问题描述】：

所以我需要能够扩展表格每一行的一些细节。现在我有两个问题：

点击展开/折叠切换按钮将触发表格中每一行的操作。 第一行始终将详细信息放在其上方。

下面是代码段：

<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 语句，但我意识到如果我为详细信息构建单独的客户端对象，我将无法访问单个客户端对象。

告诉我如何改进！

【问题讨论】：

***.com/questions/52406660/…

【参考方案1】：

没关系，这是解决它的代码。

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

【讨论】：

嗨，凯文，作为新的贡献者，我提醒您不要忘记相应地验证/赞成（或反对）我们提供的答案

【参考方案2】：

您需要一个布尔数组collapsed[] 并在您的ngFor 中使用索引，因此您可以使用collapsed[i]。看看这里在 ngFor 中使用索引：

ngFor using Index

如果您需要更多信息，请告诉我。惠康

【参考方案3】：

这是一种非常常见的模式。 最好和快速的解决方案是在 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>