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

我嵌套了表格，单击某行后，我需要在表格行下方显示数据。但是，数据将显示在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

最佳答案

您将需要进行以下更改:

在同一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。