Question

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

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

有一些角度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>

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

Angular 2 - 展开折叠表行

2 个答案: