角度可重用组件错误

Question

无法单独折叠所有四行。目前只有1人崩溃。 通过单击上/下V形符号轻松折叠并展开卡片布局中的列表视图。 也无法将ID和Name对分隔到每个下拉列表。该数据来自后端

<h2>My Employees</h2>
<table cellpadding="0" cellspacing="0" class="fold-table">
  <!-- <col width="130"> -->
  <tbody>
    <tr class="view">
      <th scope="row"></th>
      <td width="10000">
        <div class="panel-group" id="accordion" role="tablist" aria- multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">

              <div *ngFor="let employee of emp">
                <h4 class="panel-title"> <a data-toggle="collapse" data-
    parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-
    controls="collapseOne"> 
                    <ul>
                        <div>
                            <span>Name= {{employee.name}} <i class="fa fa-
    chevron-circle-down pull-right"></i></span>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse in" 
    role="tabpanel" aria-labelledby="headingOne">
                            ID= {{employee.id}}
                        </div> 
                    </ul> 
                </a> 
            </h4>
              </div>


            </div>
          </div>

        </div>
      </td>
      <!-- <td>Otto</td> -->

    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>

    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>