Как добавить новые строки внутри цикла * ngFor?Я хочу реализовать расширяющуюся функциональность свертывания внутри таблицы

Question

Я хочу реализовать в моих таблицах функцию развёртывания-свертывания.независимо от того, какую строку я щелкнул, расширенная часть должна располагаться только ниже этой строки.Я использую угловой 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;
}

Я создал демо с фиктивными данными ЗДЕСЬ .