Javascript 如何为表的每一行创建展开/折叠函数？角度6

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

• 单击展开/折叠切换将触发表中每一行的操作
• 第一行总是把细节放在上面

以下是代码段：

<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语句，但我意识到如果我构建一个单独的for details，我就无法访问单个客户机对象

让我知道如何提高
 这是一种非常常见的模式。
最好且快速的解决方案是在
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>


进一步扩展
{{client.firstName}
{{client.lastName}
{{client.company}
细节



您需要一个布尔数组
折叠[]
并在ngFor中使用索引，这样您就可以使用
折叠[i]
。请在此处查看如何在ngFor中使用索引：


如果你需要更多信息，请告诉我。Wellcome
没关系，这是解决它的代码

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


进一步扩展
无膨胀
{{client.firstName}
嘿，我有很多细节！
{{client.lastName}
{{client.company}
更多发行人详情
你好，凯文，作为一名新撰稿人，我提醒你不要忘记相应地验证/向上投票（或向下投票）我们提供的答案