如何在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

由于您的ng-container位于单独的div中，因此下拉列表数据显示在表格底部。检出Bootstrap折叠并查看“手风琴”示例，看看它是否可以解决您的问题：https://getbootstrap.com/docs/4.1/components/collapse/

Answer 2

您需要进行以下更改：

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 data of findDetails(data)">
      <td> {{data.datades.name}} </td>
      <td> {{data.datades.hobbies}} </td>
      <td> {{data.datades.profession}} </td>
    </tr>
  </ng-container>
</ng-container>

其中findDetails定义为：

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

有关演示，请参见this stackblitz。