Javascript 如何在标签下使用手风琴？角度9

我有一个表，当我点击任何一行时，新表应该拉伸到同一行下。我试着用ngx bootrap的手风琴，但失败了。 基本上我需要一个可扩展的桌子里面的桌子。当我单击任意一行时，我将调用一个服务，该服务将为扩展表提供数据

---

使用此代码可以获得相同的表。 sample.component.html

---

检查此示例示例很好，但由于我使用ngx引导，因此面临与引导相关的问题，而且示例使用JS而不是TS

 <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>

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