如何在 <td> 标签下使用手风琴？ Angular 9

Question

我有一个 table ，当我点击任何一行时，新的 table 应该在同一个下被拉伸。我尝试使用 ngx-bootrap 的手风琴，但我失败了。
基本上我需要一个可扩展的 table inside table。当我单击任何一行时，我将调用一项服务，该服务将为扩展 table.

提供数据

Answer 1

使用此代码得到相同的 table。 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;
  }

如何在 <td> 标签下使用手风琴？ Angular 9

How to use Accordion under <td> tag? Angular 9

javascript

html-table

accordion

typescript

angular