Bootstrap手风琴不适用于动态工作台角度

Question

我已经为我的角度表实现了Bootstrap手风琴功能，但是问题是当我扩展一个标签而不折叠其他标签时。

我在这里使用了data-parent属性，以便当显示可折叠项之一时，指定父项下的所有可折叠元素都将关闭。

此处父div ID为：accordion

以下是我的桌子：

   <div class="table-list-view panel-group" id="accordion">        
      <table class="table table-bordered wrapper-table-collapsible">
         <thead>
            <tr>
               <td>
                  Expand/Collapse
               </td>               
               <td>Name</td>
               <td>Roles</td>
               <td></td>
            </tr>
         </thead>

         <tbody>
            <tr>
               <td class="no-padding">
                  <table class="table table-bordered table-striped table-collapsible no-margin">
                     <tbody *ngFor="let udata of myudatadata">
                        <tr>                                                        
                            <td>                                                                  
                                <a  data-toggle="collapse" data-parent="#accordion" href=".{{udata.uid}}" role="button" aria-expanded="false" 
                                    aria-controls="collapseExample">
                                    <img class="ico ico-collapsible" src="../arrow.png">
                                </a>                                
                            </td>                                                        
                            <td>{{udata.uid}}</td>                            
                            <td>                                                                
                                <ul class="collapse {{udata.uid}}">
                                    <li *ngFor="let content of udata.userroles | slice:1:5; let i = index">
                                        <span>{{content}}</span>
                                    </li>                                                                                                                                                
                                </ul>
                            </td>                                                                                    

                            <td>
                                <ul class="nav navbar-nav nav-actions nav-transparent">
                                    <li>
                                        <button (click)="edit(udata)" type="button" class="btn-transparent role-edit" title="Edit" aria-label="Edit">
                                        <i class="ico ico-gm-edit"></i>
                                        </button>
                                    </li>                                   
                                </ul>                           
                            </td>

                          </tr>                          
                     </tbody>

                  </table>
               </td>
            </tr>
         </tbody>
      </table>
   </div>

在这里，我在<ul>标签中添加了<td>，并且我点击了第一个<td>标签中存在的图片后会对其展开和折叠。展开/折叠基于类而不是id作为其动态表。

任何帮助将不胜感激。