打开折叠元素后单击时不会关闭答案

【问题标题】：after open collapse element doesn't close on clicking打开折叠元素后单击时不会关闭
【发布时间】：2020-02-01 09:52:44
【问题描述】：

我正在使用 bootstrap 4 来折叠卡片内的一些数据，问题是一旦我单击链接以显示折叠的元素，它就不再关闭。

哪里出错了？

<h5 class="card-header">
                            <a class="collapsed d-block" data-toggle="collapse" href="#table-collapsed{{obj.0}}" aria-expanded="true" aria-controls="collapse-collapsed" id="heading-collapsed">
                                <i class="fa fa-chevron-down pull-right"></i>
                                 Details

 <div id="table-collapsed{{obj.0}}" class="collapse" aria-labelledby="heading-collapsed">
                            <table class="card-body table-sm table table-hover text-right">
                                <tbody>
                                    <tr>
                                        <td>NICKNAME</td>
                                        <td>{{ obj.4 }}</td>
                                    </tr> 
                                    <tr>
                                        <td>DOB</td>
                                        <td>{{ obj.5 }}</td>
                                    </tr> 
                                </tbody>
                            </table>
                        </div>

【问题讨论】：

标签： bootstrap-4 collapse

【解决方案1】：

试试这个代码

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

  <div class="card-header">
        <a class="collapsed d-block" data-toggle="collapse" href="#table-collapsed" aria-expanded="true"
          aria-controls="collapse-collapsed" id="heading-collapsed">
          <i class="fa fa-chevron-down pull-right"></i>
          Details
        </a>
      </div>
    
      <div id="table-collapsed" class="collapse" aria-labelledby="heading-collapsed">
        <table class="card-body table-sm table table-hover text-right">
          <tbody>
            <tr>
              <td>NICKNAME</td>
              <td>data1</td>
            </tr>
            <tr>
              <td>DOB</td>
              <td>data 2</td>
            </tr>
          </tbody>
        </table>
      </div>

【讨论】：

那么它与我的代码有何不同？？我希望链接根据卡的 ID 是动态的
你试过动态id的角度表达吗？ {{ 'table-collapsed' + obj }}