如何在 *ngFor 循环中添加新行？我想在 table 中实现展开折叠功能

Question

我想在我的表格中实现展开-折叠功能。无论我单击哪一行，扩展部分都应该仅位于该行的下方。我正在使用 angular 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。

如何在 *ngFor 循环中添加新行？我想在 table 中实现展开折叠功能

How to add new rows inside of *ngFor loop? I Want to Implement expanding collapsing functionality inside of the table

angular2-template

angular