要在表中添加多条角形手风琴

Question

单击行中表格中的一个单元格。我想在该行的下方打开一个新行，以显示某些内容，例如折叠或手风琴。但是我想使用ngFor为所有行编写代码。我该如何实现？

下面是我的代码。在单击“ OUname”时，我想打开该行下方的折叠。

<div class="table-responsive">
    <table class="table table-bordered table-striped table-hover js-basic-example dataTable">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">OUName</th>
                <th scope="col">Project Name</th>
                <th scope="col">Cloud Type</th>
                <th scope="col">Total Allocation</th>
                <th scope="col">Consumption</th>
                <th scope="col">NewAllocation</th>
                <th scope="col">Approved</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let qa of qas$ | async | paginate: { itemsPerPage: 10, currentPage: p }; let i = index">
                <th scope="row">{{ i + 1 }}</th>
                <td>
                    <p class="viewou" (click)="content='showSubContentTwo'">
                        <ngb-highlight [result]="qa.OUName" [term]="filter.value"></ngb-highlight>
                    </p>
                </td>
                <td>
                    <ngb-highlight [result]="qa.ProjectName" [term]="filter.value"></ngb-highlight>
                </td>
                <td>
                    <ngb-highlight [result]="qa.CloudType" [term]="filter.value"></ngb-highlight>
                </td>
                <td colspan="3">
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar"
                                             [ngStyle]="{ 'width': qa.TotalAllocation.per+ '%' }">
                                            ${{qa.TotalAllocation.amt}}
                                        </div>
                        <div class="progress-bar progress-bar-warning" role="progressbar"
                                             [ngStyle]="{ 'width': qa.Consumption.per+ '%' }">
                                            ${{qa.Consumption.amt}}
                                        </div>
                        <div class="progress-bar progress-bar-danger" role="progressbar"
                                             [ngStyle]="{ 'width': qa.NewAllocation.per+ '%' }">
                                            ${{qa.NewAllocation.amt}}
                                        </div>
                        <!--     <div class="progress-bar progress-bar-free" role="progressbar" style="width:30%">
                    $1200
                </div>-->
                    </div>
                </td>
                <td>
                    <ngb-highlight [result]="qa.Approved" [term]="filter.value"></ngb-highlight>
                </td>
                <td>
                    <div style="display: flex;">
                        <i class="nb-edit edit" (click)="content='showSubContent'"></i>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>