如何在 ngFor 循环 [Angular] 中制作可扩展的表格行？

Posted 2023-02-22

【中文标题】如何在 ngFor 循环 [Angular] 中制作可扩展的表格行？

【英文标题】：How to make expandable table rows within an ngFor loop [Angular]?

【发布时间】：2019-10-08 03:57:28

【问题描述】：

我已经嵌套了表格，当单击一行时，我需要在表格行下方显示数据。但是，数据显示在 ngRepeat 的末尾。

html：

  <table class="table table-hover table-bordered table-responsive-xl">
  <thead>
    <th> Name </th>
    <th> Place </th>
    <th> Phone </th>
  </thead>

  <tbody>

  <tr *ngFor="let data of data1" (click) ="expand()">
        <td> +data.name </td>
        <td> data.place </td>
        <td> data.phone </td>
  <td> data.hobbies </td>
  <td> data.profession </td>
 </tr>

 <ng-container *ngIf="expandContent">
    <tr *ngFor="let data of data2">
        <td> data.datades.name </td>
        <td> data.datades.hobbies </td>
        <td> data.datades.profession </td>
 </tr>
 </ng-container>
 </tbody>
 </table>

组件：

export class AppComponent  
expandContent = true;
  data1 =[
 'name' : 'john',
 'place' : 'forest',
 'phone' : '124-896-8963'
  ,
 'name' : 'Jay',
 'place' : 'City',
 'phone' : '124-896-1234'
  , 
 'name' : 'Joseph',
 'place' : 'sky',
 'phone' : '124-896-9632'
  ,
  ]

 data2 =[
'whoseData' : 'john',
'datades' : 
'name' : 'john',
'hobbies' : 'singing',
'profession' : 'singer'
 
 ,
'whoseData' : 'Jay',
'datades' : 
'name' : 'jay',
'hobbies' : 'coding',
'profession' : 'coder'


]

 expand()
this.expandContent = !this.expandContent

 

当第一行被点击时，我想显示与第一行相关的数据，在它下面。

预期结果

DEMO

【参考方案1】：

您需要进行以下更改：

在同一个ngFor循环迭代中包含主行和对应的细节行 将expanded 属性添加到data 对象，而不是使用全局expandContent 定义一种方法来过滤点击行的详细信息

模板可能如下所示：

<ng-container *ngFor="let data of data1">
  <tr (click)="data.expanded = !data.expanded">
    <td>  data.expanded ? '&ndash;' : '+' data.name </td>
    <td> data.place </td>
    <td> data.phone </td>
    <td> data.hobbies </td>
    <td> data.profession </td>
  </tr>
  <ng-container *ngIf="data.expanded">
    <tr *ngFor="let details of findDetails(data)">
      <td> details.datades.name </td>
      <td> details.datades.hobbies </td>
      <td> details.datades.profession </td>
    </tr>
  </ng-container>
</ng-container>

其中findDetails 定义为：

findDetails(data) 
  return this.data2.filter(x => x.whoseData === data.name);

请参阅this stackblitz 以获取演示。

【讨论】：

这是一个很好的答案！自己用这个！

感谢您的出色回答！节省了我的时间！

这真是太棒了！！

我尝试了几种不同的方法（通常需要 css 和 jquery），这是 Angular 中最简单的方法，谢谢！

很好的答案。但是，对我来说，它会在所有后续行中重复第一列的值。知道为什么会这样吗？

【参考方案2】：

您的下拉数据显示在表格底部，因为您的ng-container 位于单独的div 中。 Checkout Bootstrap Collapse 并查看 Accordion 示例，看看它是否能解决您的问题：https://getbootstrap.com/docs/4.1/components/collapse/

【讨论】：

I used this on my tr elements