如何在 标签下使用手风琴？角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;
  }