如何在* ngFor循环中添加新行？我想在表格中实现扩展的折叠功能

Question

我想在我的表中实现expand-collapse功能。我点击扩展部分的任何行都应该只在该行的下方。我正在使用角度2.不使用任何其他框架我该怎么办？我尝试了下面的代码片段，但无论是哪一行，我点击了新行（扩展部分）总是低于所有行。

这是虚拟代码片段：

<table>
  <tr>
    <td>column header1</td>
    <td>column header2</td>
    <td>column header3</td>
    <td>column header4</td>
    <td></td>

    <tr *ngFor="let list of pipelines">
      <td>{{list.name}}</td>
      <td>{{list.id}}</td>
      <td>{{list.date}}</td>
      <td>{{list.company}}</td>
      <td><button (click)="ExapndCollapse()">Click to Exapand</button></td>
    </tr>

    <tr>
      <td *ngIf="showExapandedRow">Hello There!</td>
    </tr>

</table>

Answer 1

干得好：

html的：

<table>
    <tr>
        <td>column header1</td>
        <td>column header2</td>
        <td>column header3</td>
        <td>column header4</td>
        <td></td>
    </tr>

    <ng-container *ngFor="let list of pipelines">
        <tr>
            <td>{{list.name}}</td>
            <td>{{list.id}}</td>
            <td>{{list.date}}</td>
            <td>{{list.company}}</td>
            <td><button (click)="ExapndCollapse(list.id)">Click to Exapand</button></td>
        </tr>
        <tr>
            <td [ngClass]="{ 'expandedRow': true, 'active': exapandedRowId === list.id }">Hello There!</td>
        </tr>
    </ng-container>

</table>

.TS：

  exapandedRowId: number = 0;
  ExapndCollapse(id) {
    this.exapandedRowId = this.exapandedRowId === id? 0 : id;
  }

的CSS：

.expandedRow {
  display: none;
}
.expandedRow.active {
  display: block;
}

我用虚拟数据HERE创建了一个演示。