Как использовать Аккордеон под тегом <td>? Angular 9

Question

У меня есть таблица, когда я нажимаю на любую строку, когда новая таблица должна растягиваться под той же. Я пытался использовать аккордеон ngx-bootrap, но мне это не удалось.
В основном мне нужна расширяемая таблица внутри таблицы. Когда я нажму на любую строку, я позвоню в службу, которая предоставит данные для расширения таблицы.

Answer 1

Используйте этот код, чтобы получить ту же таблицу. sample.component. html

 <table class="table">
            <tbody>
              <ng-container *ngFor="let item of topItem; let i = index">
                <tr>
                  <td width="5%" (click)="toggle(item, i)">
                    <i aria-hidden="true" class="fa fa-{{ i }}-icon" [ngClass]="{'fa-expand-icon': visible,'fa-compress-icon': !visible}"
                    ></i>
                  </td>
                  <td width="20%">{{ item.Name }}</td>
                  <td width="15%">{{ item.mobile }}</td>
                </tr>
                <tr class="d-none row-num-{{ i }}">
                  <td *ngIf="showTable" colspan="2">
                    <div class="row">
                        <table class="table">
                          <tbody>
                            <tr *ngFor="let item of subsItem; let i = index">                              
                              <td>sample data</td>
                              <td>sample data</td>
                            </tr>
                          </tbody>
                        </table>
                    </div>
                  </td>
                </tr>
              </ng-container>
            </tbody>
          </table>

Использовать файл машинописи sample.component.ts

toggle(item, index) {
    let selector = `.row-num-${index}`;
    document.querySelector(selector).classList.toggle('d-none');
    this.showTable = true;
  }