Angular 2 - 展开折叠表格行

Question

当我单击表格的检查器图标时，需要显示就地行详细信息，该图标将展开或折叠，就像单击每行按钮时的切换一样 。

在展开 View 中，我需要查询后端并获取一些详细信息并显示包括图像缩略图在内的信息。

有几个 Angular 2 表，例如 ngx-datatable、ngprime 等。目前，由于某种原因，我们无法使用任何这些插件来实现此功能。

附加了一个图像，该图像具有行的内联扩展以显示行详细信息。

我们如何在不使用任何插件的情况下在 Angular 中实现此功能。请问有人可以帮忙吗？

Answer 1

与我在这里回答的非常相似:Angular Material Collapsible Card

StackBlitz:https://stackblitz.com/edit/angular-kxkckz

如果您不想使用任何软件包，则需要如下所示的内容:

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }

  th, td {
    padding: 5px;
    text-align: left;
  }
</style>


<table fixed>
  <tr>
    <td>
      Click to toggle content 1
      <button (click)="collapsed1=!collapsed1">Toggle me</button>
    </td>
  </tr>
  <tr *ngIf="!collapsed1">
      <td>
        <p>Showing content 1</p>
        <p>Grass is green</p>
      </td>
  </tr>
  <tr>
    <td>
      Click to toggle content 2
      <button (click)="collapsed2=!collapsed2">Toggle me</button>
    </td>
  </tr>
  <tr *ngIf="!collapsed2">
      <td>
        <p>Showing content 2</p>
        <p>The sky is blue</p>
      </td>
  </tr>
</table>