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

Question

我已经嵌套了表格，当单击一行时，我需要在表格行下方显示数据。但是，数据显示在 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

Answer 1

您需要进行以下更改：

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

模板可能如下所示：

<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 以获取演示。

Answer 2

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