Angular 2 - 展开折叠表行答案

【问题标题】：Angular 2 - expand collapse table rowAngular 2 - 展开折叠表行
【发布时间】：2018-03-07 12:45:52
【问题描述】：

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

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

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

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

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

【问题讨论】：

您能否提供一些代码或您目前拥有的代码？ stackoverflow.com/help/mcve

标签： angular

【解决方案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>

【讨论】：

正确。但是，我的问题是这样的，假设有 5 行，单击每一行，就在该行的正下方，我需要打开一个详细信息部分，在其中显示与该行相关的一些信息。再次单击同一行，详细信息部分将被折叠。对于表中的每一行，我需要另一行或在该行正下方单击时将切换的东西。这就是我面临的问题。
好的，将我的答案更改为您所描述的内容。
这很有帮助。感谢您的快速建议。
@dev.mk 你能描述一下你最后是怎么做到的吗？我假设您会为 5 行使用一些索引？

【解决方案2】：

  <table class="table">
       <thead>
     <tr>
      <th style="width:200px;">Name</th>
      <th>Created On</th>
      <th>Last Modified</th>
     </tr>
       </thead>
       <tbody>
     <ng-container *ngFor="let item of menuList">
      <tr>
      <td style="width:10px" attr.data-target=".row{{item._id}}" data-toggle="collapse"
       data-role="expander">
    <span *ngIf="item.SubMenu?.length && item.SubMenu[0].MenuName!==undefined"
     class="fa fa-plus" (click)="toggleChildren($event)">
    </span>&nbsp;{{ item.MenuName }}
      </td>
      <td>{{ item.CreatedBy }}</td>
      <td>{{ item.CreatedDate }}</td>
      </tr>
      <ng-template [ngIf]="item.SubMenu.length>0">
      <ng-container *ngFor="let subitem of item.SubMenu">
    <tr class="collapse row{{subitem.ParentId}}" aria-expanded="true">
     <td style="width:10px" attr.data-target=".row{{subitem._id}}" 
     data-toggle="collapse"
     data-role="expander">
     &nbsp;&nbsp;&nbsp;<span *ngIf="subitem.SubMenu?.length && subitem.SubMenu[0].MenuName!==undefined"
     class="fa fa-plus" (click)="toggleChildren($event)">
       </span>  &nbsp; {{ subitem.MenuName }}
     </td>
     <td>{{ subitem.CreatedBy }}</td>
     <td>{{ subitem.CreatedDate }}</td>
    </tr>
    <ng-template [ngIf]="subitem.SubMenu.length>0">
     <ng-container *ngFor="let sub of subitem.SubMenu">
     <tr class="collapse row{{sub.ParentId}}" aria-expanded="true">
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ sub.MenuName }}</td>
     <td>{{ sub.CreatedBy }}</td>
     <td>{{ sub.CreatedDate }}</td>
     </tr>
     </ng-container>
    </ng-template>
      </ng-container>
      </ng-template>
     </ng-container>
       </tbody>
       </table>

【讨论】：