Angular 2-展开折叠表格行 [英] Angular 2 - expand collapse table row

问题描述

当我单击表的检查器图标时，需要显示就地行详细信息，该图标会展开或折叠，就像单击每行上的按钮时进行切换一样解决方案

与我在这里回答的非常相似: 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>

There is a requirement to show an in-place row details when I click on an inspector icon of the table which would expand or collapse just like a toggle on click of a button at each row .

In the expanded view, I need to query backend and fetch some details and show information including image thumbnails.

There are a couple of angular 2 tables like ngx-datatable, ngprime etc. Currently, for some reason, we cannot use any of those plugins to achieve this functionality.

Attached an image which has an inline expansion of a row to show the row details.

How do we achieve this functionality in Angular without using any plugins. Could any of you please help?

解决方案

Very similar to what I answered here: Angular Material Collapsible Card

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

You'll need something like below if you don't want to use any packages:

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

这篇关于Angular 2-展开折叠表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！